背景

Question

背景

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

只需添加这两个文件，我就可以只创建一个html弹出窗口：

的manifest.json

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

popup.html

<html>
    ..
    hello world
</html>

问题

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

我尝试了什么

我将此添加到 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');
  });
}

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

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

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

但是没有任何改变，我甚至无法在chrome dev工具中找到eventsPage.js源代码。

我该怎么做？

Answer 1

很多方式：

在popup.js中添加示例popup.html的脚本，并致电chrome.runtime.getBackgroundPage(function callback)与活动页面进行互动。

popup.html

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

popup.js

chrome.runtime.getBackgroundPage(backgroundPage => backgroundPage.testMethod());

eventsPage.js

const testMethod = () => console.log('test');

使用Message Passing（此链接中有很多示例）与活动页面进行通信。
由于您希望在弹出页面和事件页面之间传输数据，因此还有许多其他解决方法，例如，我们可以使用chrome.storage等全局存储来保存/加载/响应更改。 / p>

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

背景

问题

我尝试了什么

1 个答案: