如何从Chrome扩展弹出窗口加载JS [英] how to load JS from a chrome extension popup
问题描述
background
我只是想创建一个扩展名为chrome的扩展名，点击扩展名图标，它会加载一个加载javascript文件的弹出窗口。
我只能通过添加以下两个文件来完成仅html的弹出窗口：
$ b
清单.json
{
..
browser_action：{
default_popup：popup.html，
..
}
}
popup.html
< html>
..
hello world
< / html>
问题
我想实际加载chrome
I还尝试将 eventsPage.js 的src添加到 popup.html ：
< /头>
..
< script src =eventsPage.js>< / script>
< body>
..
但是这并没有改变，我甚至找不到eventsPage.js来源于chrome开发工具。
我该怎么做？ 解决方案
/ p>
-
在<$ c $中添加一个脚本，例如
popup.jsc> popup.html ，然后致电chrome.runtime.getBackgroundPage（函数回调）与事件页面进行交互。
popup.html
...
< script src =popup.js>< / script>
...
popup.js
chrome.runtime.getBackgroundPage（backgroundPage => backgroundPage.testMethod（））;
eventsPage.js
const testMethod =（）=>的console.log（试验）;
-
使用消息传递（此链接中有许多示例）可与事件页面进行通信。
由于你要在弹出页面和事件页面之间传输数据，还有很多其他解决方法，例如，我们可以使用全局存储，如 Add a script for example
popup.jsinpopup.htmland callchrome.runtime.getBackgroundPage(function callback)to interact with event page.popup.html
... <script src="popup.js"></script> ...popup.js
chrome.runtime.getBackgroundPage(backgroundPage => backgroundPage.testMethod());eventsPage.js
const testMethod = () => console.log('test');Use Message Passing(there are many examples in this link) to communicate with event page.
Since you want to transfer data between popup page and event page, there are many other workarounds, for example, we could use global storage such as
chrome.storageto save/load/react to changes.
chrome.storage 来保存/加载/响应更改。 $ bbackground
I simply want to create a chrome extension where I click on the extension icon, it loads a popup that loads a javascript file.
I was able to do an html only popup simply by adding these two files:
manifest.json
{
..
"browser_action": {
"default_popup": "popup.html",
..
}
}
popup.html
<html>
..
hello world
</html>
problem
I want to actually load a chrome events page so that the popup page calls the events page and interacts with it.
what i have tried
I added this to manifest.json
"background": {
"scripts": ["eventsPage.js"],
"persistent": false
}
and added a simple eventsPage.js file:
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');
});
}
when I launch the extension and click on inspect to see chrome dev tools.. nothing shows up on the console:
I've also tried adding the src of eventsPage.js to popup.html:
</head>
..
<script src="eventsPage.js"></script>
<body>
..
but that changes nothing, I can't even find the eventsPage.js source in chrome dev tools.
How do I do this?
Many ways:
这篇关于如何从Chrome扩展弹出窗口加载JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
