扩展的devtools(chrome扩展)侦听选项卡导航

Question

我正在构建一个devtool扩展，并希望在当前页面导航到不同页面时再次注入我的脚本：

chrome.webNavigation.onDOMContentLoaded.addListener(function(object details) { ... });

我已经研究了好几天了，但我不知道把代码放在哪里。我在github上使用此模板：https://github.com/thingsinjars/devtools-extension

我可以从内容脚本中监听和注入脚本并执行脚本，但我不知道如何监听选项卡url更改并将我的代码/脚本注入下一页。

Answer 1

我也在写一个扩展，尽管我也因为通信问题被困了几天，但我想我可以帮助你理解更多：

首先：与devtools相关联的js文件将与devtool当前正在检查的页面绑定（当我说绑定时，这意味着它们彼此相关，但它们不共享相同的上下文或对谷歌扩展api的访问）。

第二：后台页面在自己的沙盒环境中运行，每个扩展保留一个实例，这意味着你的面板在不同的页面上有多个实例，但它们都共享同一个后台页面。

现在尝试回答您的问题：

您的面板脚本（通常称为devtools.js）应该向后台页面发送一条消息，通知它应该开始跟踪选项卡的导航，后台页面应该侦听来自扩展的任何打开面板的消息，并执行必要的操作（开始跟踪所需选项卡的导航并在页面加载后注入脚本）：

devtools.js

chrome.runtime.sendMessage( { 
  message: 'track-navigation',
  of: chrome.devtools.inspectedWindow.tabId
} );

background.js

var trackedTabs = [];
function injectScript( details ) {
  if ( trackedTabs.indexOf( details.tabId ) ) {
    chrome.tabs.executeScript( details.tabId, { file: 'include/some-script.js' } );
  }
}
function trackNavigation() {
  chrome.webNavigation.onDOMContentLoaded.addListener( injectScript, {
    // here I've included some filtering in order to restrict urls to listen to 
    url: [
      { hostContains: 'www.sample.com', ports: [80, 443] },
      { hostContains: 'www.sample.local', ports: [80, 443] }
    ]
  } );
}
chrome.runtime.onMessage.addListener( function( request, sender, sendResponse ) {
  switch ( request.message ) {
    case 'track-navigation':
      trackedTabs.push( request.of );
      trackNavigation();
      break;
  } 
} );

虽然还有其他方法可以完成同样的事情（例如从要加载的页面发送消息，这样你就不必在后台脚本上跟踪加载的页面）；我认为这应该对你的问题有所帮助。