Question

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

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

我已经在这几天了，但我无法弄清楚代码的放置位置。我在github上使用这个模板：https://github.com/thingsinjars/devtools-extension

我可以从内容脚本中听取并注入脚本并执行脚本，但我无法弄清楚如何监听标签网址更改并将我的代码/脚本注入下一页。

Answer 1

我也写了一个扩展，即使我在通信问题上也被困了几天，我想我可以帮你理解一点：

首先：与devtools相关联的js文件将与devtools当前正在检查的页面绑定（当我说绑定它意味着相互关联，但他们不共享相同的上下文或访问权限谷歌的扩展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;
  } 
} );

虽然还有其他方法可以完成同样的事情（例如从正在加载的页面发送消息，因此您不必跟踪在后台脚本上加载的页面）;我认为这可以帮助你解决问题。

扩展的devtools（镀铬扩展）监听标签导航

1 个答案: