Question

我用弹出窗口和一个按钮进行了扩展。单击此按钮后，扩展程序将打开页面上具有类“ .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"
    ]
}

Answer 1

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

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

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

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

Google扩展程序如何将我的脚本注入活动选项卡并与弹出按钮链接？

1 个答案: