谷歌扩展如何将我的脚本注入到活动选项卡并与弹出按钮链接？答案

【问题标题】：Google extension how to inject my script to active tab and link with pop-up button?谷歌扩展如何将我的脚本注入到活动选项卡并与弹出按钮链接？
【发布时间】：2018-12-12 23:48:28
【问题描述】：

我做了一个带有弹出窗口和一个按钮的扩展。单击此按钮时，扩展程序会打开页面上所有带有“.link”类的链接一个新选项卡。但是当我点击时没有任何效果:(如何链接 2 个脚本？

popup.js

 document.addEventListener('DOMContentLoaded', function() {
 let openScreensBtn = document.getElementById('btnScreens');
 openScreensBtn.addEventListener('click', function() {
  let links = document.querySelectorAll('.link');
  let arrLinks = Array.from(links);
  let arrHref = [];
  for (let i = 0; i < arrLinks.length; i++) {
    arrHref.push(arrLinks[i].getAttribute('href'));
  };
  for (let i = 0; i < arrHref.length; i++) {
    window.open(arrHref[i], '_blank');
  };
 });
});

popup.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Index</title>
  <script src="popup.js"></script>
</head>

<body>
  <button id="btnScreens">Open Screens</button>
</body>

</html>

manifest.json

{
    "name": "Ext",
    "description" : "",
    "version": "1.0",
    "manifest_version": 2,

    "browser_action": {
        "default_icon": "128.png",
        "default_popup": "popup.html"
    },

    "permissions": [
        "activeTab"
    ]
}

【问题讨论】：

弹出窗口是一个单独的页面，有自己的 chrome 扩展 URL。它就像一个独立于另一个站点的选项卡，所以它有自己的 DOM 和链接。见How to access the webpage DOM rather than the extension page DOM?
@wOxxOm 谢谢！但我不明白如何在我的 script.js 文件中链接内容脚本代码（例如） chrome.tabs.executeScript({ code: 'document.body.style.backgroundColor="orange"' });到我的弹出按钮:(
确保您打开了正确的开发工具：右键单击弹出窗口并单击“检查”。您可能会看到有关内联代码被阻止的错误，这意味着您需要在 js 文件中而不是在 HTML 中附加 onclick 侦听器。

标签： javascript google-chrome-extension

【解决方案1】：

将其视为两个独立的部分，它们可以通过扩展后台脚本相互通信。所以你需要做的是：

在您的 popUp.html 页面中添加一个自可执行脚本，该脚本将设置加载后与扩展后台脚本建立连接。 extension messaging
一旦收到来自 popUp.html 的连接，就在扩展背景上在 activeTab 上注入 contentScript
那么您需要与注入的内容建立连接脚本。您可以使用与第 1 步相同的方法，也可以在第 2 步的回调中从后台使用tabs connect API
然后您可以搜索所有带有 .link 类的链接，并使用连接设置将其传递回 popUp.html。

PS：由于所有部分都是隔离的，请遵循@wOxxOm 的调试建议：

popUp.html - 右键单击浏览器操作按钮并单击检查弹出窗口
content_script - 页面调试控制台
后台脚本 - 扩展调试器

【讨论】：

@wOxxOm 你是对的。谢谢你纠正我。让我更新答案