gpt4 book ai didi

javascript - tabs.executeScript() 不在扩展的内容页面中注入(inject)脚本

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:41:46 24 4
gpt4 key购买 nike

我刚刚开始学习如何在 Firefox 中创建我自己的插件。我正在使用 webExtensions,尽管我发现很难获得全面的文档(我想是因为它仍然是一个新的实现?)。代码似乎都运行良好,并且它在 executeScript 调用后完成了一个“onExecuted”函数。但是我注入(inject)的脚本 (output.js) 似乎没有触发。运行代码后,我在 javascript 控制台中收到以下错误:“没有匹配的消息处理程序”。我不确定注入(inject)的脚本是否应该是一个独立的 js 文件,或者它是否只是 js 命令的集合。我也尝试了后者(只是一个简单的消息框),但也没有用。

我的代码: list .json:

{
"manifest_version": 2,
"name": "ExportTabs",
"version": "0.9",

"description": "Export/Import Tabs",
"icons": {
"48": "icons/export48.png"
},

"permissions": [
"tabs",
"activeTab",
"<all_urls>"
],

"applications": {
"gecko": {
"id": "938745934875@example.com"
}
},

"browser_action": {
"default_icon": "icons/export.png",
"default_popup": "popup/popup.html"
}
}

按下插件按钮时我的 popup.html:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
</head>

<body>
<div>
<button onclick="save()">Save Tabs</button>
<button onclick="view()">View Tabs</button>
</div>

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

</html>

popup.js 文件:

function save() {
chrome.tabs.create({"url": chrome.extension.getURL("popup/output.html")}, onCreated);
}

function onCreated(newTab) {
chrome.tabs.executeScript(newTab.id, {
file: "popup/output.js",
allFrames: true
}, onExecuted);
}

function onExecuted(result) {
alert("inside onExecuted");
}

新创建的选项卡的 ouput.html:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
</head>

<body>
<div>testing stuff</div>
<div id="output"></div>

</body>

</html>

上面页面的output.js:

//output.js
(function() {
alert("inside output.js");
})();

我应该补充一点,我有 noscript 插件,所以尝试了“全局允许脚本”,但它仍然给出相同的错误。为任何帮助干杯。

编辑:我尝试将 executeScript 方法中的 file: "popup/output.js", 替换为 code: 'alert("hello");',它仍然没有用。

从 OP 发布的答案中移出的信息:
撞。我在另一个带有 ff50.something(测试版 channel )的盒子上尝试了这段代码,注入(inject)甚至没有产生“onExecuted”。但它不会抛出任何错误。基本上弹出窗口有效,之后什么也没有发生。

最佳答案

个别问题分析

问题“没有匹配的消息处理程序”

显示消息“没有匹配的消息处理程序”是 49 之前的 Firefox 版本中的一个已知错误。该错误记录为 Bug 1254003 .

问题“executeScript 不注入(inject)脚本”

在版本 49+ 中,它仍然无法正常工作,因为 documented restriction :

You can only inject code into pages whose URL can be expressed using a match pattern: meaning, its scheme must be one of "http", "https", "file", "ftp". This means that you can't inject code into any of the browser's built-in pages, such as about:debugging, about:addons, or the page that opens when you open a new empty tab.

因此,您不能使用 tabs.executeScript() 将脚本注入(inject)到从您自己的扩展加载的内容中。当我用从 web 加载页面替换从扩展加载页面时,该示例有效:

function save() 
{
chrome.tabs.create({"url": "https://en.wikipedia.org/wiki/Bacon"}, onCreated);
}

当您想在从您的扩展加载的页面中执行代码时,通过在您的内容页面中加载脚本文件直接执行 JavaScript

如果您需要将参数传递给加载内容页面内的脚本,您可以在打开选项卡的脚本和打开的选项卡内的脚本之间发送消息。

请参阅 Content Scripts documentation 上的“与后台脚本通信”一章.虽然文档专门针对 list 文件中的“content_scripts”,但有关通信的解释也适用于您的情况。

示例代码:

popup.js 中的函数Save

function onCreated(newTab) 
{
// Use setTimeOut to give the loaded page some time to register the message listener
setTimeout(onCreatedInner, 500);
function onCreatedInner()
{
console.log("oncreated " + " " + newTab.id);
chrome.runtime.sendMessage(42);
}
}

output.js:

chrome.runtime.onMessage.addListener(notify);

function notify(message)
{
window.alert(message);

}

问题“弹出窗口中的 JavaScript 代码未执行”

在您 friend 的设置中,您遇到了一个不同的问题:默认情况下,您不允许在 Firefox 的 Web 扩展的内容页面中使用内联脚本。您应该会在浏览器控制台中看到错误

Content Security Policy: The page's settings blocked the loading of a resource at self

因此,不要对保存按钮使用内联“onclick”,而是从您的 JavaScript 脚本动态分配 onclick 事件。如何更改 popup.html:

<button onclick="save" id="buttonSave">Save Tabs</button>
<button >View Tabs</button>

popup.js开头添加的代码:

var elem = document.getElementById("buttonSave");
elem.onclick = save;

完整的工作示例

这是按预期工作的完整最小示例代码:

文件 manifest.json

{
"manifest_version": 2,
"name": "ExportTabs",
"version": "0.9",

"description": "Export/Import Tabs",
"icons": {
"48": "icons/export48.png"
},


"permissions": [
"tabs",
"activeTab",
"<all_urls>"
],

"applications": {
"gecko": {
"id": "938745934875@example.com"
}
},

"browser_action": {
"default_icon": "icons/export.png",
"default_popup": "popup/popup.html"
}
}

文件 popup.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
</head>

<body>
<div>
<button onclick="save" id="buttonSave">Save Tabs</button>
<button >View Tabs</button>
</div>

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

</html>

文件 popup.js

// Register onclick-Event for Save Button
var elem = document.getElementById("buttonSave");
elem.onclick = save;

function save()
{
chrome.tabs.create({"url": chrome.extension.getURL("popup/output.html")}, onCreated);
}

function onCreated(newTab)
{
// Use setTimeOut to give the loaded page some time to register the message listener
setTimeout(onCreatedInner, 500);
function onCreatedInner()
{
chrome.runtime.sendMessage(42);
}
}

文件 output.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
</head>

<body>
<div>testing stuff</div>
<div id="output"></div>

</body>
<script src="output.js"></script>

</html>

文件 output.js

// register message handler
chrome.runtime.onMessage.addListener(notify);

function notify(message)
{
// Write message into page
var elem = document.getElementById("output");
elem.innerText = message;

// Show alert
window.alert(message);
}

关于javascript - tabs.executeScript() 不在扩展的内容页面中注入(inject)脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40232135/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com