网站可以调用浏览器扩展吗？

Question

我是浏览器扩展开发的新手,我理解浏览器扩展的概念,改变页面并将代码注入其中.

有没有办法可以扭转这个方向？我编写了一个提供一组API的扩展程序,想要使用我的扩展程序的网站可以检测到它的存在,如果它存在,网站可以调用我的API方法,如var extension = Extenion(foo, bar).这可以在Chrome,Firefox和Safari中使用吗？

例:

1. 谷歌创建了一个名为BeautifierExtension的新扩展.它有一组API作为JS对象.

2. 用户访问reddit.com.Reddit.com检测BeautifierExtension并通过调用来调用APIbeautifer = Beautifier();

请参阅#2 - 通常它是检测匹配站点并更改页面的扩展.我有兴趣知道的是#2是否可行.

Answer 1

自Chrome推出以来externally_connectable,在Chrome中这很容易实现.首先,在manifest.json文件中指定允许的域:

"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}

用于chrome.runtime.sendMessage从页面发送消息:

chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
  function(response) {
    // ...
  });

最后,在您的背景页面中收听chrome.runtime.onMessageExternal:

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    // verify `sender.url`, read `request` object, reply with `sednResponse(...)`...
  });

如果您无法获得externally_connectable支持,原始答案如下:

我将从以Chrome为中心的角度回答,尽管此处描述的原则(网页脚本注入,长时间运行的后台脚本,消息传递)几乎适用于所有浏览器扩展框架.

从高层次来看,您要做的是将内容脚本注入每个网页,这会添加一个API,可供网页访问.当站点调用API时,API会触发内容脚本执行某些操作,例如通过异步回调将消息发送到后台页面和/或将结果发送回内容脚本.

这里的主要困难是"注入"网页的内容脚本不能直接改变页面的JavaScript 执行环境.它们共享DOM,因此在内容脚本和网页之间共享DOM结构的事件和更改,但不共享函数和变量.例子:

• DOM操作:如果内容脚本<div>向页面添加元素,那么它将按预期工作.内容脚本和页面都将看到新的内容<div>.

• 事件:如果内容脚本设置了事件侦听器(例如,对于元素的点击),则侦听器将在事件发生时成功触发.如果页面为从内容脚本触发的自定义事件设置了侦听器,则在内容脚本触发这些事件时将成功接收它们.

• 函数:如果内容脚本定义了新的全局函数foo()(就像您在设置新API时可能尝试的那样).页面无法查看或执行foo,因为foo只存在于内容脚本的执行环境中,而不存在于页面环境中.

那么,您如何设置合适的API？答案有很多步骤:

1. 在较低级别,请使您的API 基于事件.网页会触发自定义DOM事件dispatchEvent,并且内容脚本会监听它们addEventListener,并在收到它们时采取操作.这是一个简单的基于事件的存储API,网页可以使用它来扩展存储数据:

   content_script.js(在你的扩展名中):

   // an object used to store things passed in from the API
   internalStorage = {};
   
   // listen for myStoreEvent fired from the page with key/value pair data
   document.addEventListener('myStoreEvent', function(event) {
       var dataFromPage = event.detail;
       internalStorage[dataFromPage.key] = dataFromPage.value
   });
   

   非扩展性网页,使用基于事件的API:

   function sendDataToExtension(key, value) {
       var dataObj = {"key":key, "value":value};
       var storeEvent = new CustomEvent('myStoreEvent', {"detail":dataObj});
       document.dispatchEvent(storeEvent);
   }
   sendDataToExtension("hello", "world");
   

   正如您所看到的,普通网页正在触发内容脚本可以查看和响应的事件,因为它们共享DOM.事件附加了数据,在CustomEvent构造函数中添加.我的例子非常简单 - 一旦有了页面中的数据,你可以在内容脚本中做更多的事情(很可能将它传递给后台页面进行进一步处理).

2. 然而,这只是战斗的一半.在上面的例子中,普通的网页必须自己创建sendDataToExtension.创建和触发自定义事件非常冗长(我的代码占用3行并且相对简短).您不希望强制网站编写神秘的事件触发代码只是为了使用您的API.解决方案有点讨厌:将<script>标记附加到共享DOM,将事件触发代码添加到主页面的执行环境中.

   在content_script.js里面:

   // inject a script from the extension's files
   // into the execution environment of the main page
   var s = document.createElement('script');
   s.src = chrome.extension.getURL("myapi.js");
   document.documentElement.appendChild(s);
   

   myapi.js主页可以访问任何定义的函数.(如果您正在使用"manifest_version":2,则需要包含myapi.js在清单的清单中web_accessible_resources).

   myapi.js:

   function sendDataToExtension(key, value) {
       var dataObj = {"key":key, "value":value};
       var storeEvent = new CustomEvent('myStoreEvent', {"detail":dataObj});
       document.dispatchEvent(storeEvent);
   }
   

   现在普通网页可以简单地做到:

   sendDataToExtension("hello", "world");
   

3. 我们的API流程还有一个问题:myapi.js脚本在加载时不会完全可用.相反,它将在页面加载时间后加载一段时间.因此,普通网页需要知道何时可以安全地调用您的API.您可以通过myapi.js触发页面侦听的"API ready"事件来解决此问题.

   myapi.js:

   function sendDataToExtension(key, value) {
       // as above
   }
   
   // since this script is running, myapi.js has loaded, so let the page know
   var customAPILoaded = new CustomEvent('customAPILoaded');
   document.dispatchEvent(customAPILoaded);
   

   使用API​​的纯网页:

   document.addEventListener('customAPILoaded', function() {
       sendDataToExtension("hello", "world");
       // all API interaction goes in here, now that the API is loaded...
   });
   

4. 加载时脚本可用性问题的另一个解决方案是run_at在清单中设置内容脚本的属性,"document_start"如下所示:

   manifest.json的:

       "content_scripts": [
         {
           "matches": ["https://example.com/*"],
           "js": [
             "myapi.js"
           ],
           "run_at": "document_start"
         }
       ],
   

   摘自文档:

   在"document_start"的情况下,文件在来自css的任何文件之后但在构造任何其他DOM或运行任何其他脚本之前注入.

   对于某些内容脚本,可能比"API已加载"事件更合适,更省力.

5. 为了将结果发送回页面,您需要提供异步回调函数.无法从API同步返回结果,因为事件触发/侦听本质上是异步的(即,您的站点端API函数在内容脚本通过API请求获取事件之前终止).

   myapi.js:

   function getDataFromExtension(key, callback) {
       var reqId = Math.random().toString(); // unique ID for this request
       var dataObj = {"key":key, "reqId":reqId};
       var fetchEvent = new CustomEvent('myFetchEvent', {"detail":dataObj});
       document.dispatchEvent(fetchEvent);
   
       // get ready for a reply from the content script
       document.addEventListener('fetchResponse', function respListener(event) {
           var data = event.detail;
   
           // check if this response is for this request
           if(data.reqId == reqId) {
               callback(data.value);
               document.removeEventListener('fetchResponse', respListener);
           }
       }
   }
   

   content_script.js(在你的扩展名中):

   // listen for myFetchEvent fired from the page with key
   // then fire a fetchResponse event with the reply
   document.addEventListener('myStoreEvent', function(event) {
       var dataFromPage = event.detail;
       var responseData = {"value":internalStorage[dataFromPage.key], "reqId":data.reqId};
       var fetchResponse = new CustomEvent('fetchResponse', {"detail":responseData});
       document.dispatchEvent(fetchResponse);
   });
   

   普通网页:

   document.addEventListener('customAPILoaded', function() {
       getDataFromExtension("hello", function(val) {
           alert("extension says " + val);
       });
   });
   

   reqId如果您一次有多个请求,这是必要的,这样他们就不会读取错误的响应.

而且我认为这就是一切!因此,当您考虑其他扩展也可以将侦听器绑定到您的事件以窃听页面如何使用您的API时,不适合胆小的人,也可能不值得.我只知道这一切,因为我为学校项目制作了一个概念验证加密API(并随后了解了与之相关的主要安全隐患).

总之:内容脚本可以从普通网页侦听自定义事件,脚本还可以注入一个脚本文件,其中包含的功能使网页更容易触发这些事件.内容脚本可以将消息传递到后台页面,然后后台页面存储,转换或传输来自消息的数据.