Chrome Extension 擴展程序小白入門

時間 2019-11-19

原文原文鏈接

Chrome Extension 擴展程序

前請說明：本文適用於以前歷來沒有接觸過chrome extension擴展程序的同窗~javascript

編寫demo

建立項目文件夾`chrome_ext_demo`，在項目根路徑（`chrome_ext_demo/`）下建立 `manifest.json`

在manifest.json中添加以下示例（只是個簡單例子，詳細字段說明可參考官方文檔）：html

{
    "name":"Chrome Extension demo",
    "version":"1.0.0",
    
    "manifest_version": 2,
    "description":"Hello chrome extension.",
    "browser_action":{
        "default_icon":"icon.png",
        "default_popup":"popup.html"
    },
    "web_accessible_resources":[
        "icon.png",
        "popup.js"
    ],
    "content_scripts": [  
        {  
            "matches": ["*://xxx.com/xxx/*"],  
            "js": ["content.js"]  
        }  
    ] 
}

小小說明一下：
manifest_version的值必須是2，content_scripts.matches這個數組中的值表示咱們但願匹配的域名，以*://baidu.com/*爲例，這個表示只要域名是baidu.com，不論協議是什麼，不論路徑是什麼，這個插件都生效~java

根據`web_accessible_resources`和`content_scripts`中填寫的`icon.png`、`popup.html`、`popup.js`、`content.js`文件路徑得知，咱們須要在`chrome_ext_demo/`下建立如下3個文件（PS：圖片偷了下懶，隨便找了一張圖，不規範>.<）。

在popup.html添加以下代碼：git

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            width:350px;
        }
        div{
            border:1px solid #eeeaaa;
            padding:20px;
            font: 20px normal helvetica,verdana,sans-serif;
        }
    </style>
    <script src="popup.js"></script>
</head>
<body>
    <div>123</div>
</body>
</html>

在popup.js添加以下代碼：github

function sayHello(){
    var message = document.createTextNode("Hello chrome extension!");
    var out = document.createElement("div");
    out.appendChild(message);
    document.body.appendChild(out);
}
window.onload = sayHello;

在content.js添加以下代碼：web