如何在 devtools 中发送 injected_scripts 中的触发函数

Question

我有一个工作扩展，但开发工具只在初始化期间工作一次，在清单中我定义了一个 content_script 并且 content_script 注入了一个 injected_script转播一系列事件

window.postMessage({ eventName: window.appName, ... [other details] })

and thru injected -> content -> background -> devtools, it gets to devtools.

但是如果我想重新运行这个注入的脚本怎么办，比如当我点击开发工具面板上的一个按钮时，如果我想为我希望返回的数据提供一些参数怎么办

例如

// devtools.js
sendToInjectedScript({params: ['appName', 'location']})

// injectedScript.js
// accepts params
window.postMessage({message: params.map((p) => window[p]})

我该怎么做？

Answer 1

您可以使用 chrome.devtools.inspectedWindow.eval or with chrome.tabs.executeScript 在检查的 window 中 运行 编码。在您的 Dev Tools 面板中，您可以有一个调用函数的按钮，以在检查的 window 中执行函数调用。我找到了几个（未经测试的）方法来实现这一点，但我不完全确定哪个更合适。

方法一：使用chrome.devtools.inspectedWindow.eval

开发工具页面：

function sendToInjectedScript(params) {
    chrome.devtools.inspectedWindow.eval('sendWindowParamData(' + message.params + '); + ');
}

sendToInjectedScript({params: ['appName', 'location']});

注入的脚本：

function sendWindowParamData(params) {
   window.postMessage({message: params.map((p) => window[p]});
}

清单：

"permissions": [
  "tabs"
],

方法二：使用chrome.tabs.executeScript

开发工具页面：

// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

backgroundPageConnection.onMessage.addListener(function (message) {
    // Handle responses from the background page, if any
});

function sendToInjectedScript(params) {
    // Relay the tab ID to the background page
    chrome.runtime.sendMessage({
        tabId: chrome.devtools.inspectedWindow.tabId,
        params: params
    });
}

sendToInjectedScript({params: ['appName', 'location']});

背景页：

chrome.runtime.onConnect.addListener(function(devToolsConnection) {
    // assign the listener function to a variable so we can remove it later
    var devToolsListener = function(message, sender, sendResponse) {
        // Inject a content script into the identified tab        
        chrome.tabs.executeScript(message.tabId, {
            code: 'sendWindowParamData(' + message.params + ');'
        });
    }
    // add the listener
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(function() {
         devToolsConnection.onMessage.removeListener(devToolsListener);
    });
}

注入的脚本：

function sendWindowParamData(params) {
   window.postMessage({message: params.map((p) => window[p]});
}

清单：

"permissions": [
  "tabs"
],

我还没有玩过这些，所以这只是查看 API 的一些猜测。