最近一个多月都在开发chrome的插件, 从无到有, 算是了解部分了!
说下chrome开发前需要具备的基本东西吧:

H5的前端基础, js一定要会, 这个是必须的, 不说精通熟练, 但是至少要掌握.
基本的英文阅读能力, 因为很多东西要官方文档, 虽然360有翻译了官方文档, 但是是2013的了, 可以对照起来看!
有足够的耐心.

在做插件时我的H5是属于基本不会的! 也是查阅大量的资料, 边做边学,才终于将公司要的插件开发出来!

说下插件开发吧

怎么才知道我需要什么文件
background.js, content_script.js, popup.js文件的创建是根据实际情况的

需要和网页交互的, 比如要获取或者更改当前DOM里面的元素,就需要创建content_script.js
需要在插件里面显示内容, 需要创建popup.HTML和popup.js两个文件,
需要做数据的保存的话可以创建background.js

在这之前先要在manifest.json里面获取权限

"permissions" : [
        "alarms",
        "tabs",
        "https://*/*",
        "*://*/*",
        "http://*/*"

    ],

"content_scripts":[{
        "matches":[
            "https://*/*",
            "*://*/*",
        ],
        "js":["lib/jquery-2.0.0.min.js", "content_script.js"],
        "run_at": "document_end"
    }]

background.js, content_script.js, popup.js文件之间的通讯, 这里只是做讲了发送一次消息的. 发送多次消息,也就是长连接和这个区别不大, 只是改了部分等下,这个百度是可以搜索到的,我就不说了

content_script.js可以做的事情

1. content_script.js向background.js发送消息

// 这里要先获取在那个标签页面
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
           // 这里也可以知道当前标签页的URL      tabs[0].url
           
           chrome.tabs.sendMessage(tabs[0].id, { message: "begin"}, function (response) {

                });
            
});;

2. content_script.js向popup.js发送消息

// 这里使用的是extension
chrome.extension.sendMessage({msg: "message"},function (response) {
          // response 是background 收到消息后的返回数据
            if (response !== undefined) {
            }
 });

3. content_script.js接收来自popup和background的消息

chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) {
  // request 你收到的内容,
  // sender 可以获取到你的tab的url
  // sendRequest 收到消息后回调发送消息的人   也就是上面response得到东西
});

background.js可以做的事情

1. background向content_script.js发送消息

// 这里使用的是runtime
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
           
           chrome.tabs.sendMessage(tabs[0].id, { message: "begin"}, function (response) {

                });
            
});;

2. background 向popup.js发送消息

// 在background里面定义变量data
var data = "我是数据"

// 在popup.js里面  
// popup.js是可以直接获取到background里面的数据
var data = chrome.extension.getBackgroundPage().data;
console.log(data);

3. background接收来自popup和content_script.js的消息

chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) {
  // request 你收到的内容,
  // sender 可以获取到你的tab的url
  // sendRequest 收到消息后回调发送消息的人   也就是上面response得到东西
});

popup.js可以做的事情

1. popup.js向content_script.js发送消息

// 这里要先获取在那个标签页面
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
           // 这里也可以知道当前标签页的URL      tabs[0].url
           
           chrome.tabs.sendMessage(tabs[0].id, { message: "begin"}, function (response) {

                });
            
});;

2. popup.js 向background发送消息

chrome.extension.sendMessage({msg: "message"},function (response) {
          // response 是background 收到消息后的返回数据
            if (response !== undefined) {
            }
 });

3. popup接收来自content_script.js的消息

 //使用extension
chrome.extension.onMessage.addListener(function(request, sender, sendRequest) {
  // request 你收到的内容,
  // sender 可以获取到你的tab的url
  // sendRequest 收到消息后回调发送消息的人   也就是上面response得到东西
});

更新当前页面的url

chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
        chrome.tabs.update(tabs[0].id, {url: "https: www.baidu.com"});
    });

以上内容基本可以解决插件开发的基本问题了, 其他的api 可以进入Google的开发者网站查询!

chrome 插件开发心得