Google chrome extension 如何使用Firefox扩展将HTML和JS写入页面？

我不知道如何将HTML和javascript注入到带有Firefox扩展的网页中

这适用于Chrome扩展，但不适用于Firefox。请注意，我使用了chrome.extension.getURL，它引入了HTML和Javascript

这是我的清单-注意我甚至不用背景资料

{
“背景”：{
“脚本”：[“js/background.js”，“js/jquery.js”]
},
“内容脚本”：[{
“js”：[“js/jquery.js”、“js/chart-min.js”、“js/chart colors.js”、“js/jquery ui.min.js”、“js/profiles/my_request.js”、“js/options.js”、“js/profiles/projects_builder.js”、“js/profiles/my_api.js”、“js/profiles/user_board_builder.js”、“js/profiles/user_default_labels”，“js/profiles/default_lists.js”、“js/profiles/master_board.js”、“js/profiles/projects.js”、“js/profiles/new_todo_label.js”、“js/profiles/reports_dashboard.js”、“js/profiles/completion_chart.js”、“js/profiles/cumulative_flow_chart.js”]，
“匹配项”：[“https://asana.com/*" ],
“所有帧”：正确
}],
“权限”：[“标识”、“cookies”、“存储”、“活动选项卡”https://asana.com/*"],
“名称”：“此处的董事会”，
“短名称”：“董事会”，
“版本”：“3.1.9.5”，
“清单版本”：2，
“icons”：{“48”：“images/logo_.png”}，
“说明”：“网站的html”，
“浏览器操作”：{
“默认图标”：“images/logo\u.png”，
“默认弹出窗口”：“html/popup.html”
},
“网络可访问资源”：[“图像/*”，“html/*”]
}

默认列表示例——使用my_请求的default_lists.js，my_请求只是一个jQueryAjax包装器

DefaultLists=（函数（）{
函数DefaultLists（）{
if（window.location.href.includes（“#默认_列表”））{
这个.show_form（）
}
DefaultLists.prototype.show_form=函数{
my_request.ajax({
url:chrome.extension.getURL（“html/manage\u default\u lists.html”），
键入：“get”，
成功：功能（数据）{
$（'.panel.panel--project'）.remove（）
$（'.panel.panel--perma'）.html（数据）
}
});
};
}
返回默认列表；
})();
window.default_lists=新的DefaultLists（）；

所以现在manage_default_lists.html看起来像

加载。。。
$（“#取消_删除_标签_按钮”）。在（'click'，函数（事件）{
$（'#删除_标签_模态'）。隐藏（）
});
$（“#取消(强制)列出(按钮)）。在（'click'，函数（事件）{
$（'#force_lists_modal'）.hide（）
});
$（文档）。关闭（“单击”，“编辑标签”）。打开（“单击”，“编辑标签”，函数（事件）{
td=$（this.parents（'td'））
td.find（'.show_row'）.hide（）
td.find（'.edit_row'）.show（）
event.preventDefault（）
});
$（文档）。关闭（“单击”，“取消编辑”）。打开（“单击”，“取消编辑”，函数（事件）{
td=$（this.parents（'td'））
td.find（'.show_行'）.show（）
td.find（'.edit_row'）.hide（）
event.preventDefault（）
});
$（文档）。关闭（“单击”，“取消新建”）。打开（“单击”，“取消新建”，功能（事件）{
//console.log（'cancel'）
$（“#创建_行”）.hide（）
event.preventDefault（）
});
$（文档）。关闭（“单击”、“新建标签”按钮）。打开（“单击”、“新建标签”按钮），功能（事件）{
$（“#创建_行”）.show（）
$（'#新的_标签_名称'）.val（''）
event.preventDefault（）
});
$（文档）.off（“单击”，“标签\文章”）.on（“单击”，“标签\文章”，函数（事件）{
//console.log（event.target.className）
如果（event.target.className！=“颜色编辑器bg”）{
$（'.label colors'）.hide（）；
}
});

您正在使用内容脚本和可访问的web资源将此HTML添加到网页中。禁止在浏览器操作弹出窗口或选项页等扩展页面中使用内联脚本与扩展的CSP无关。在您的情况下，该页面的CSP适用于您添加到其中的内容。该页面可能禁止使用内联脚本很容易，网站经常这样做

您可以使用webRequest API重写页面的

内容安全策略

HTTP头，也可以稍微修改代码，后者是一个更好的解决方案，不仅因为它更集中，而且因为当多个扩展在同一HTTP请求中执行时，重写HTTP头的结果是随机的东部标准时间

让我们重新编写代码：

• 分别存储脚本
• 通过browser.tabs.executeScript获取和注入
• 在需要时运行注入的代码

行为的重要变化是，代码将在内容脚本的上下文中运行，使用内容脚本的jQuery和变量。以前，代码是在页面上下文中运行的，因此它使用jQuery和页面的其他变量

我正在使用和异步/等待语法

manifest.json：

“背景”：{
“脚本”：[
“浏览器polyfill.min.js”，
“background.js”
]
},
“内容脚本”：[{
“js”：[
“浏览器polyfill.min.js”，
“content.js”
],
“匹配项”：[“…………”]
}],

目录结构：

• html/manage_default_lists.html
• html/manage_default_lists.js

由于executeScript只能在扩展页中使用，而不能在内容脚本中使用，因此我们将向后台脚本发送一条带有指令的消息

content.js：

异步函数getResource（名称）{ const htmlUrl=browser.runtime.getURL（`html/${name}.html`）； const[html，scriptId]=wait Promise.all([ fetch（htmlUrl）.then（r=>r.text（））， browser.runtime.sendMessage({ cmd:“executeScript”， 路径：`html/${name}.js`， }), ]); const js=window[scriptId]； 删除窗口[纸条]