chrome扩展开发实战入门之一－hellocrx

后记：在写这篇文章时，我还没搞懂chrome扩展的基本原理。后来才明白，最简单（且实用）的扩展只需要manifest.json和content_scripts.js两个文件，无需background.js等。content_scripts中的代码会按照manifest.json中指定的匹配网址（matches）和运行时间(run_at)来执行，从而对网页的DOM进行操作。而且为了方便，还可以在manifest.json中引入jquery进行操作。可参考下一篇文章。

环境：win7+chrome77

1、新建目录，名为hellocrx ；其中，新建文件manifest.json，内容为：

{
  "manifest_version": 2,
  "name": "hellocrx",
  "version": "1.0.0",  
  "description": "crx入门学习",
    "content_scripts": [
    {
    "matches": ["<all_urls>"],
    "js": ["mycontent.js"],
    "run_at": "document_end",
    "all_frames": true
    }
  ],
  "permissions": [
    "bookmarks", "http://*/*", "https://*/*"
  ]
}

再新一建一个空的文件，名为：mycontent.js

好了,chrome扩展已经完成了。现在：

（1）访问：chrome://extensions/

（2）打开“开发者模式”开关，点击“加载已解压的扩展程序，选择您所建立的hellocrx目录。

hellocrx扩展已经出现在url地址栏右侧了，点击扩展图标会有弹出菜单。可以关闭开发者模式了。

2、为了实现交互，现在给chrome浏览器增加右键菜单

（1）修改manifest.json中permissions字段为：

  "permissions": [
    "bookmarks", "http://*/*", "https://*/*","contextMenus","tabs"
  ]

与manifest_version字段平级增加background字段：

    "background":
    {
        // 2种指定方式，如果指定JS，那么会自动生成一个背景页
        //"page": "background.html"
        "scripts": ["background.js"]
    },

(2) background.js内容为：

chrome.contextMenus.create({
    title: "测试右键菜单",
    onclick: function(){alert('您点击了右键菜单！');}
});

（3）注意保存文件，然后打开chrome://extensions/

点击hellocrx扩展上的刷新图标，重新加载扩展。（注意：如果您修改的是chrome扩展的manifest.json配置项，一定要在chrome的扩展管理中删除当前扩展然后重新加载才行。更新是没有用的）

此时，在网页上点鼠标右键，将弹出提示。但是中文是乱码（我想解决办法应该是自己写background.html，指定页面编码。我想这也说明此时脚本运行在background页面中的。）

3、background(以及popup）中无法直接访问页面DOM。就需要用到有权限与网页交互的content_scripts到，也就是我们在manifest.json中指定的mycontent.js。

（1）修改background.js,使得点击右键时调用mycontent.js，以便操作DOM

chrome.contextMenus.create({
    title: "测试右键菜单",    
});
// "activeTab" permission is sufficient for this:
chrome.contextMenus.onClicked.addListener(function(info, tab){
  chrome.tabs.executeScript(tab.id, {file: "mycontent.js"})
});

（2）修改mycontent.js内容如下：

document.body.style.backgroundColor="black";

重新加载插件，在页面上点右键菜单，发现页面背景变成黑色了。

（这里有个问题：重新刷新网页后，背景还是黑色。解决办法是关闭插件后再刷新。）

4、为了更方便调试查看操作效果，还是不用右键菜单了。改为直接点击插件来执行mycontent.js

即让background页和content页实现相互通信

（1）manifest.json

{
  "manifest_version": 2,
  "name": "hellocrx",
  "version": "1.0.0",  
  "description": "crx入门学习",
  "content_scripts": [
    {
    "matches": ["<all_urls>"],
    "js": ["mycontent.js"],
    "run_at": "document_end",
    "all_frames": true
    }
  ],
  "background":
    {
      "scripts": ["background.js"]
    },
  "browser_action": {
    "default_title": "mycrx测试"
    },
  "permissions": [
    "bookmarks", "http://*/*", "https://*/*","contextMenus","tabs","activeTab"
  ]
}

（2）background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  console.log('Turning ' + tab.url + ' green!');
  alert("crx was clicked and url is:" + tab.url);
chrome.tabs.query(
    {active: true, currentWindow: true}, 
    function(tabs) {
          chrome.tabs.sendMessage(
            tabs[0].id, 
            {greeting: "hello"}, 
            function(response) {
                    console.log(response.farewell);
        });
});
});

（3）mycontent.js：

alert("mycontent start run"); 
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")//判断是否为要处理的消息
      sendResponse({farewell: "goodbye"});
      //访问页面的DOM
      document.body.style.backgroundColor="green";
      document.getElementById("kw").value="crx"
});