编写浏览器插件 - js文件之间的通信

https://www.jianshu.com/p/51c650f98d9c

{
  "manifest_version": 2, //固定的
  "name": "小工具", //插件名称
  "description": "程序员小工具",  //插件的描述
  "version": "1.0", //插件版本号
  "permissions": [  //允许插件访问的url

  ],
  "browser_action": {   //插件加载后生成的图标
    "default_icon": "icon.png",   //图标的图片
    "default_title": "小工具",    //书表移动上去显示的文字
    "default_popup": "popup.html"  //点击图标执行的文件
  },
  "background": {  //background script即插件运行的环境
    "page":"background.html",
    "scripts":["xxx","xxx"]  //数组.chrome会在扩展启动时自动创建一个包含所有指定脚本的页面
  },
  "content_scripts": [{  //对页面内容进行操作的脚本
    "matches": ["http://*/*", "https://*/*"] //满足什么条件执行该插件
    "js": ["scripts/contentscript.js"],
    "run_at": "document_start"  //在document加载时执行该脚本
  }]
}

content_scripts里面引入的js文件会被加载到web页面，一般都在这个js文件里去操作web页面的dom元素

而background里面的js文件则相当于一个数据池，他和缓存类似，不会随着插件的关闭而被销毁，所以一般需要存储的数据都会放在backgroun.js中去存储，而popup.html以及popup.js一般只是用来展示数据和搭建backgroun和content的通信

  bs.onclick=function () {
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
          chrome.tabs.sendMessage(tabs[0].id, {message:"calculate"}, function(response) {
              console.log(tabs[0].id)
              $('#bs').text(response.result)
          });
      });
  }

chrome.tabs.sendMessage  发送消息的函数
第一个参数为发送者的tabid  第二个参数为发送出去的消息体   第三个参数是一个回调函数 他的作用是接收对方的回应消息

//接收消息
chrome.extension.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.message == "calculate"){
            ttmsg = $('._191KSt').text()
            sendResponse({result: ttmsg})
        }

    });  
chrome.extension.onMessage.addListener  监听消息

sendResponse回复消息给发送者

注意 在popup.html中，页面元素绑定事件不可以直接动态绑定，而需要外部引入js 通过查找元素来绑定点击事件

更详细教程https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html