webextension 弹出窗口可以在打开后立即执行 javascript（即没有用户交互）吗？

Question

My goal is to build a simple and extremely lightweight webextension, which doesn't have a background.js or content scripts, so that nothing is loaded until the user clicks the extension's toolbar button.我的目标是构建一个简单且极其轻量级的 webextension，它没有 background.js 或内容脚本，因此在用户单击扩展程序的工具栏按钮之前不会加载任何内容。

I know it's possible to inject javascript into a webpage without using a content script, as theDisplay #Anchors extension demonstrates with this snippet in its background.js file:我知道可以在不使用内容脚本的情况下将 javascript 注入网页，正如Display #Anchors扩展在其 background.js 文件中使用此代码段演示的那样：

chrome.tabs.executeScript(tabId, {
    file: 'toggle-anchors.js',
    allFrames: true
});

I would like to perform this injection from popup.js, not from background.js.我想从 popup.js 执行此注入，而不是从 background.js。

However, I'm having difficulty making popup.js execute immediately when the toolbar is clicked and the popup appears.但是，当单击工具栏并出现弹出窗口时，我很难让 popup.js 立即执行。 My code so far is very simple, as I'm trying to test the concept before adding more: manifest.json到目前为止，我的代码非常简单，因为我正在尝试在添加更多内容之前测试这个概念： manifest.json

{
"manifest_version": 2,
  "name": "TestScript",
  "version": "1.0",
  "description": "testscript",
  "icons": {
    "48": "icon.png"
  },
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_icon": "icon-32.png",
    "default_title": "Test",
    "default_popup": "popup/popup.html"
  },
}

popup.html弹出窗口.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="choose_beast.css"/>
  </head>
  <body>
    <script src="popup.js"></script>
  </body>
</html>

popup.js弹出窗口.js

alert("Hello world!"); //I've tried various things here that would be obvious when executed, but nothing works
window.close()

I can't tell whether there's something inherent to the permissions/limitations of webextensions that is preventing the code in popup.js from running when the popup appears.我不知道 webextensions 的权限/限制是否有一些固有的东西阻止 popup.js 中的代码在弹出窗口出现时运行。 Many of the examples I've looked at execute javascript triggered by an eventlistener (eg "Beastify," which Mozilla includes in their how-to tutorial for building webextensions):我看过的许多示例都执行由事件侦听器触发的 javascript（例如“Beastify”，Mozilla 将其包含在构建 webextensions 的操作教程中）：

document.addEventListener("click", (e) => {
  if (e.target.classList.contains("beast")) {
    var chosenBeast = e.target.textContent;
    var chosenBeastURL = beastNameToURL(chosenBeast);
    browser.tabs.executeScript(null, { 
      file: "/content_scripts/beastify.js" 
    });

In this case, the javascript injection is triggered by a user interaction with the popup, but is there a specific reason why the executeScript method couldn't fire immediately when the popup is opened?在这种情况下，javascript 注入是由用户与弹出窗口的交互触发的，但是在弹出窗口打开时，executeScript 方法无法立即触发是否有特定原因？

(This question is a little similar to Webextension popup script not executing , but whereas that question is ultimately concerned with discovering where extensions output console logs, my question is asking specifically about how to make the popup run my code immediately. ...Also, if anyone has any thoughts about potential performance gains keeping the JS within popup.js instead of background.js/content scripts. I have enough extensions installed that it makes a noticeable dent in my browser's startup time, so I'm trying to see if I can prevent code from being loaded until it's actually fired by the browser button being clicked.) （这个问题有点类似于Webextension popup script not execution ，但该问题最终与发现扩展输出控制台日志的位置有关，我的问题是专门询问如何使弹出窗口立即运行我的代码。...另外，如果有人对将 JS 保留在 popup.js 而不是 background.js/content 脚本中的潜在性能提升有任何想法。我安装了足够多的扩展，这会显着缩短浏览器的启动时间，所以我想看看是否我可以阻止代码被加载，直到它被点击浏览器按钮实际触发。）

Answer 1

Firefox can't show alert in popups or background scripts. Firefox 无法在弹出窗口或后台脚本中显示alert 。 You can use console.log , output from which can be seen in the addon debugger: open about:debugging page, click inspect for your extension.您可以使用console.log ，其输出可以在插件调试器中看到：打开about:debugging页面，单击inspect您的扩展。 More info: https://extensionworkshop.com/documentation/develop/debugging/更多信息： https : //extensionworkshop.com/documentation/develop/debugging/
executeScript requires a host permission. executeScript 需要主机权限。

The activeTab permission needs a more explicitly given intent of interaction than just presenting the popup page. activeTab权限需要更明确的交互意图，而不仅仅是呈现弹出页面。 You can make a button in the popup with a click listener and it will be granted the permission when clicked.您可以使用click侦听器在弹出窗口中创建一个按钮，并在click时授予该按钮的权限。 This permission also works with API events for user interaction like browserAction.onClicked (it doesn't fire when the popup is specified via default_popup in manifest.json or setPopup API method) or commands.onCommand or contextMenus.onClicked and several others.此权限也适用于用户交互的 API 事件，如 browserAction.onClicked（当通过 manifest.json 中的default_popup或setPopup API 方法指定弹出窗口时，它不会触发）或 commands.onCommand 或 contextMenus.onClicked 和其他几个。

So the solution would be:所以解决方案是：

either use <all_urls> or *://*/* in manifest.json's permissions , which adds a scary installation warning about the extension being able to read/modify data on all sites,在 manifest.json 的permissions使用<all_urls>或*://*/* ，这会添加一个可怕的安装警告，关于扩展程序能够读取/修改所有站点上的数据，
or use a button in the popup,或使用弹出窗口中的按钮，
or remove default_popup , keep browserAction.onClicked in the background script and use executeScript to inject a content script that shows your popup UI as a DOM element inside ShadowDOM or iframe.或删除default_popup ，将 browserAction.onClicked 保留在后台脚本中，并使用 executeScript 注入一个内容脚本，该脚本将您的弹出式 UI 显示为 ShadowDOM 或 iframe 中的 DOM 元素。 You may need to use web_accessible_resources for that.您可能需要为此使用web_accessible_resources 。 Alternatively, open a small window using chrome.windows.create, which unfortunately doesn't work nice in Firefox as it always displays such a window in the center of the screen.或者，使用 chrome.windows.create 打开一个小窗口，不幸的是，它在 Firefox 中效果不佳，因为它总是在屏幕中央显示这样一个窗口。

webextension 弹出窗口可以在打开后立即执行 javascript（即没有用户交互）吗？

问题描述

1 个解决方案

解决方案1
0 2021-10-23 17:49:03

webextension 弹出窗口可以在打开后立即执行 javascript（即没有用户交互）吗？

问题描述

1 个解决方案

解决方案1 0 2021-10-23 17:49:03

解决方案1
0 2021-10-23 17:49:03