铬扩展。 JS 适用于弹出窗口而不是主窗口答案

【问题标题】：Chrome extension. JS works on popup window and not on main window铬扩展。 JS 适用于弹出窗口而不是主窗口
【发布时间】：2020-04-27 14:23:45
【问题描述】：

所以，我有麻烦了。我正在制作一个 chrome 扩展，我有 popup.html（带信用的窗口）、content.js、background.js（点击时有效）。主要问题是，当我点击扩展 background.js 的图标时，我点击了它并开始在弹出页面上工作，而不是在我需要的页面上工作。我试图在 popup.js 中制作它，但同样的，它在 popup.html 页面中工作，而不是在主页上。 js代码怎么改？

content.js 的主要部分：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
        var name = window.location.href;
        subject = name.substr(name.indexOf("/",1)+2,name.indexOf("-",1)-name.indexOf("/",1)-2);
        exam = name.substr(name.indexOf("-",1)+1,name.indexOf(".",1)-name.indexOf("-",1)-1);
        myLoop();
    }
  }
);

背景.js：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

【问题讨论】：

如果浏览器操作有弹出窗口，browserAction.onClicked 会 not 触发。

标签： javascript html jquery google-chrome-extension

【解决方案1】：

听起来你在 popup.html 中包含 content.js。这是错误的。内容脚本用于网页，但 browser_action（或 page_action）弹出窗口是一个扩展页面，具有自己的 chrome-extension:// URL、DOM、窗口、document。在 Chrome 浏览器中，您可以通过在弹出窗口内右键单击，然后单击“检查”来检查它。另见How to access the webpage DOM?

解决方案：

从 popup.html 中删除 content.js
写一个单独的popup.js
由于 chrome.browserAction.onClicked 在弹出窗口时不起作用，因此您还将其内容移动到 popup.js 中，以便在每次显示弹出窗口时运行

popup.html:

<script src=popup.js></script>

popup.js：

// this will run every time the popup is shown
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  var activeTab = tabs[0];
  chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
});

【讨论】：