Google chrome extension 如何在devtools中的注入脚本中发送触发器函数_Google Chrome Extension_Google Chrome Devtools_Content Script

Google chrome extension 如何在devtools中的注入脚本中发送触发器函数

google-chrome-extension google-chrome-devtools

Google chrome extension 如何在devtools中的注入脚本中发送触发器函数,google-chrome-extension,google-chrome-devtools,content-script,Google Chrome Extension,Google Chrome Devtools,Content Script,我有一个工作扩展，但它只在初始化期间工作一次，在清单中我定义了一个content_脚本，该content_脚本注入了一个注入的_脚本，该脚本传递一系列事件 window.postMessage({ eventName: window.appName, ... [other details] }) and thru injected -> content -> background -> devtools, it gets to devtools. 但是，如果我想重新运行这个

我有一个工作扩展，但它只在初始化期间工作一次，在清单中我定义了一个content_脚本，该content_脚本注入了一个注入的_脚本，该脚本传递一系列事件

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

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

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

e、 g

我该怎么做呢？

您可以使用或使用在已检查的窗口中运行代码。在“开发工具”面板中，可以有一个按钮，用于调用函数以在已检查的窗口中执行函数调用。我找到了一些（未经测试的）方法来实现这一点，但我不完全确定哪种方法更合适

方法1：使用

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"
],

// 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"
],

注入脚本：

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"
],

// 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"
],

清单：

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"
],

// 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"
],

方法2：使用

chrome.tabs.executeScript

开发工具页面：

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"
],

// 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"
],

背景页面：

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"
],

// 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"
],

注入脚本：

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"
],

// 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"
],

清单：

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"
],

// 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中进行的一些猜测

您可以使用或与在检查的窗口中运行代码。在“开发工具”面板中，可以有一个按钮，用于调用函数以在已检查的窗口中执行函数调用。我找到了一些（未经测试的）方法来实现这一点，但我不完全确定哪种方法更合适

方法1：使用

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"
],

// 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"
],

注入脚本：

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"
],

// 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"
],

清单：

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"
],

// 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"
],

方法2：使用

chrome.tabs.executeScript

开发工具页面：

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"
],

// 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"
],

背景页面：

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"
],

// 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"
],

注入脚本：

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"
],

// 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"
],

清单：

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"
],

// 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中进行的一些猜测

chrome.tabs只能在后台访问。js@user2167582我更新了我的答案。不幸的是，我还没有真正玩过一个扩展，所以无法测试它。我希望它有一些用处。chrome.tabs只能在后台访问。js@user2167582我更新了我的答案。不幸的是，我还没有真正玩过一个扩展，所以无法测试它。我希望它有一些用处。