Question

构建一个Chrome扩展程序，以添加一个devtools面板。那部分正在工作。开发工具面板需要能够从当前页面获取信息。

我看到的唯一方法是使用内容脚本。理想情况下，我不需要“标签”或“”权限。我同意他们是可选权限”。

我注入的内容脚本仅在清单文件中指定的页面上起作用。我希望他们在用户检查的任何页面上工作，以便我的面板可以显示信息。

用户单击面板中的按钮-我在我的panel.js中请求对“标签”和“”的可选权限

我的devtools页面.js检查“选项卡”和“”权限。如果授予了权限，我会向background.js发送一条消息-加载此内容脚本。

在Background.js的末尾接收消息似乎无关紧要，因为无论清单中指定的URL如何，内容脚本都会自动加载。但是，它不会出现在您检查的页面上。

CODE （按照上面的解释顺序进行操作）

panel.html中的

按钮 <button id="load">Load Dev Info</button> https://github.com/williamspiro/HubSpot-Developer-Extension/blob/c23b8cad6f1787264bb3e8b3673c594a7db5fe7e/panel.html#L8

Panel.js中的权限请求

document.querySelector('#load').addEventListener('click', function(event) {
    // Permissions must be requested from inside a user gesture, like a button's
    // click handler.
    chrome.permissions.request({
      permissions: ['tabs'],
      origins:['<all_urls>']
    }, function(granted) {
      // The callback argument will be true if the user granted the permissions.
      if (granted) {
       console.log("Perm granted");


      } else {
        console.log("Perm denied");
      }
    });
  });

https://github.com/williamspiro/HubSpot-Developer-Extension/blob/c23b8cad6f1787264bb3e8b3673c594a7db5fe7e/panel.js#L2-L18

权限检查是否授予 - 的sendMessage与内容脚本名背景JS和devtools.js（装载在devtools.html）

name: "devtools-page"
});


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


console.log("devtools.js ran");








chrome.permissions.contains({
    permissions: ['tabs'],
    origins: ['<all_urls>']
    }, function(result) {
    if (result) {
        // The extension has the permissions.
        // Relay the tab ID to the background page
        chrome.runtime.sendMessage({
            tabId: chrome.devtools.inspectedWindow.tabId,
            scriptToInject: "hsInspector.js"
        });
    } else {
        // The extension doesn't have the permissions.


    }
});

https://github.com/williamspiro/HubSpot-Developer-Extension/blob/c23b8cad6f1787264bb3e8b3673c594a7db5fe7e/devtools.js#L7-L35

接收到background.js的消息-注入内容脚本

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
        console.log("script:",message.scriptToInject);
        chrome.tabs.executeScript(message.tabId,
            { file: message.scriptToInject });
    }
    // add the listener
    devToolsConnection.onMessage.addListener(devToolsListener);

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

https://github.com/williamspiro/HubSpot-Developer-Extension/blob/c23b8cad6f1787264bb3e8b3673c594a7db5fe7e/background.js#L38-L52

它出现的背景JS部分无所谓，因为在清单我在清单导致它提到的内容脚本得到的所有URL注入的那场比赛，但没有被检查的页面。

manifest.json中的权限和内容脚本

    "permissions": [
        "storage",
        "activeTab"
    ],
    "optional_permissions": [
        "https://app.hubspot.com/*",
        "https://app.hubspotqa.com/*",
        "tabs",
        "<all_urls>"
    ],
    "web_accessible_resources": [
        "mac-text-cursor.svg",
        "mac-text-cursor.png"
    ],
    "content_scripts": [{
        "run_at": "document_idle",
        "js": ["jquery-3.2.1.min.js", "design-manager.js","hsInspector.js"],
        "css": ["hsDarkIde.css"],
        "document_idle": "document_start",
        "matches": ["https://app.hubspot.com/*", "https://app.hubspotqa.com/*"]
    }],
    "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",

https://github.com/williamspiro/HubSpot-Developer-Extension/blob/66ee912d56b88be052182a91257af28a4e356558/manifest.json#L25-L46

我试图从devtools中注入的内容脚本是hsInspector.js

如果devtools注入它，我只关心加载该文件。完全不需要在“匹配”页面上加载。

预期和实际结果

预期的结果是检验一个页面时，如果你去扩展的开发工具选项卡，并具备所需的权限，内容脚本将被注入到该页面。

[如果可行，我的目标是让内容脚本执行此操作] 内容脚本将用于从页面中获取数据，向background.js消息发送所需的数据，向background.js消息发送消息的panel.js数据，面板js会将其呈现在面板中。

实际结果：含量脚本不是装载到检查的页，而是装载到“匹配”下content_scripts指定的URL

如有疑问，请询问。我不是构建chrome扩展的专家，所以也许我正在使这种方法变得比需要的复杂。真的感谢任何帮助。预先谢谢你。

Chrome扩展程序：打开devtools时，扩展程序不注入内容脚本

0 个答案: