Question

我想编写一个执行以下操作的扩展程序：

定义自定义功能
允许来自Internet的Javascript代码已加载以运行此类功能

该函数应该将事件监听器作为参数。基本上，像：

newApiFunctionDefinedInExtension( function( responseHeaders ){
  console.log("Headers arrived!", responseHeaders );
} ;

然后使用chrome.webRequest，我的扩展（首先使newApiFunctionDefinedInExtension可用）将在每次从网络接收响应头时调用侦听器（在本地加载的页面中）。

我是Chrome扩展新手，无法找到实现这一目标的方法。很高兴知道：

如何使模块中定义的函数可用于已加载页面的范围
如何制作这样的EventEmitter - 是否有可以扩展的构造函数类？

我的目标很简单：加载的页面应该定义一个函数，每次有网络连接时都应调用该函数。

Answer 1

每个webRequest事件都会收到有关请求的信息，包括原始标签的ID。

因此，假设选项卡存在^{note 1}，您可以使用以下流程：

// background.js
chrome.webRequest.onHeadersReceived.addListener(function(details) {
    if (details.tabId == -1)
        return; // Not related to any tab
    chrome.tabs.sendMessage(details.tabId, {
        responseHeaders: details.responseHeaders
    });
}, {
    urls: ['*://*/*'], // e.g. all http(s) URLs. See match patterns docs
    // types: ['image'] // for example, defaults to **all** request types
}, ['responseHeaders']);

然后，在content script（declared in the manifest file）中，您会收到消息并将其传递到网页：

// contentscript.js
chrome.runtime.onMessage.addListener(function(message) {
    // Assuming that all messages from the background are meant for the page:
    document.dispatchEvent(new CustomEvent('my-extension-event', {
        detail: message
    }));
});

完成此操作后，您的网页可以按如下方式接收这些事件：

document.addEventListener('my-extension-event', function(event) {
    var message = event.detail;
    if (message.responseHeaders) {
        // Do something with response headers
    }
});

如果您想将抽象放在首位（例如实现自定义EventEmitter），那么您需要inject a script in the main execution environment，并在那里声明您的自定义API。

^{note 1}。为简单起见，我假设选项卡已存在。实际上，type＆＃34; main_frame＆＃34; （和＆＃34; sub_frame＆＃34;），因为页面尚未呈现。如果要获取顶级/框架文档的响应头，则需要将响应头临时存储在后台页面中的某些数据结构（例如队列/字典）中，并在每次发送时将数据发送到内容脚本脚本准备好了。
这可以通过在内容脚本中使用chrome.runtime.sendMessage到send a message到后台页面来实现。然后，无论何时加载页面并且内容脚本准备就绪，后台页面都可以使用sendResponse来传递任何排队的消息。

如何通过扩展程序为javascript代码提供额外的功能？

1 个答案: