chrome-extension-message.md

发表于 | 分类于

需求描述

这边插件期望可以在点击下载按钮的时候拦截下载请求，并打开插件弹窗然后选择需要上传的文件夹。

这个功能主要是拦截后需要通知打开插件弹窗，所以需要了解一下插件所定义的几种script之间的通信

chrome插件的几种js

  chrome插件里面的js有如下几种，content_script、injected_script(这两个上一章有讲)、background、popup。其实还有一个devtooljs 但是本次插件不涉及devtool所以就不提了。

  几种js作用分别是 content_script: 可访问page中的dom，同时可访问chrome部分api。injected_script: 就是页面上执行的api不可访问chrome api。background:一直在后台跑的代码，没法访问任何dom。 popup: 可访问chrome api同时可以访问插件自定义面板的chrome api当popup面板关闭则等于所有popupjs被干掉，所以不要将长期运行js写在这里。以下就是他们互相通信的方式。

injected-script content-script popup background
injected-script - window.postMessage 木有 木有
content-script window.postMessage - chrome.runtime.sendMessage chrome.runtime.connect chrome.runtime.sendMessage chrome.runtime.connect
popup-js 木有 chrome.tabs.sendMessage chrome.tabs.connect - chrome.extension. getBackgroundPage
background-js 木有 chrome.tabs.sendMessage chrome.tabs.connect chrome.extension.getViews -

  所以这个功能正儿八经的思路就是，在injected_script里面间听到download，然后poseMessage给 content-script，然而content_script访问的api有限，所以我们又需要将消息post给background去执行，所以content_script代码如下所示

1
2
3
4
5
6
7
8
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.windows.create({
    "url": "popup.html",
    "type": "popup",
    "width": 300,
    "height": 200
  });
});

打开一个面板选择需要上传的路径