如何从 chrome 扩展弹出窗口加载 JS

Question

背景

我只是想创建一个 chrome 扩展，在其中单击扩展图标，它会加载一个加载 javascript 文件的弹出窗口。

只需添加这两个文件，我就可以仅执行 html 弹出窗口：

清单文件

{
  ..    
  "browser_action": {
    "default_popup": "popup.html",
    ..
  }
}

弹出窗口.html

<html>
    ..
    hello world
</html>

问题

我想实际加载一个 chrome事件页面，以便弹出页面调用事件页面并与之交互。

我试过的

我将此添加到manifest.json

  "background": {
    "scripts": ["eventsPage.js"],
    "persistent": false
  }

并添加了一个简单的eventsPage.js文件：

chrome.runtime.onInstalled.addListener(onInit);
chrome.runtime.onStartup.addListener(onStartup);

function onInit() {
  console.log("on init");
}

function onStartup() {
  console.log("on startup");
}

if (chrome.runtime && chrome.runtime.onStartup) {
  chrome.runtime.onStartup.addListener(function() {
    console.log('on startup stuff');
  });
}

当我启动扩展程序并单击检查以查看 chrome 开发工具时.. 控制台上没有显示任何内容：

我还尝试将eventsPage.js的 src 添加到popup.html ：

</head> 
  ..
  <script src="eventsPage.js"></script>
  <body>
  ..

但这没有任何改变，我什至无法在 chrome 开发工具中找到 eventsPage.js 源。

我该怎么做呢？

Answer 1

很多方法：

在popup.html添加一个例如popup.js的脚本并调用chrome.runtime.getBackgroundPage(function callback)与事件页面进行交互。
弹出窗口.html
```
 ... <script src="popup.js"></script> ...
```
弹出窗口.js
```
 chrome.runtime.getBackgroundPage(backgroundPage => backgroundPage.testMethod());
```
事件页面.js
```
 const testMethod = () => console.log('test');
```
使用消息传递（此链接中有很多示例）与事件页面进行通信。
由于您要在弹出页面和事件页面之间传输数据，因此还有许多其他解决方法，例如，我们可以使用全局存储（例如chrome.storage来保存/加载/响应更改。

如何从 chrome 扩展弹出窗口加载 JS

问题描述

背景

问题

我试过的

1 个解决方案

解决方案1
3 已采纳 2017-01-20 05:51:58

如何从 chrome 扩展弹出窗口加载 JS

问题描述

背景

问题

我试过的

1 个解决方案

解决方案1 3 已采纳 2017-01-20 05:51:58

解决方案1
3 已采纳 2017-01-20 05:51:58