我正在开发一个 Chrome devtools 扩展,它向被检查的页面公开一个函数 (extensionEntryPoint
)。问题是 extensionEntryPoint
在检查页面加载和运行的初始脚本中不可用。我可以从 window.onload
使用它,但为时已晚。
这是我的代码:
list .json
:
{
"name": "Extension",
"version": "1",
"manifest_version": 2,
"permissions": [
"activeTab"
],
"web_accessible_resources": ["api.js"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"],
"run_at": "document_start",
"all_frames": true
}
]
}
content-script.js
:
const script = document.createElement("script");
script.src = chrome.extension.getURL("api.js");
document.documentElement.appendChild(script);
api.js
:
function extensionEntryPoint(data) {
console.log("Thanks for calling, I'll debug your data now!")
}
理想情况下,我希望 extensionEntryPoint
在页面加载时可用于页面上的任何脚本(例如,在 DOMContentLoaded
触发之前)。这可能吗?
最佳答案
由于 quirk/bug in Chrome当前您的脚本在其他页面脚本中排队,因此不能保证它是第一个运行的脚本。
解决方法:把api.js的内容放在一个文字字符串中,赋给script.textContent。
然后您可以从 manifest.json 中删除 web_accessible_resources。
内容脚本.js:
const script = document.createElement("script");
script.textContent = `
// the actual contents of api.js
// .......
`;
document.documentElement.appendChild(script);
script.remove();
要在 IDE 中保留代码的语法突出显示,请将代码放入一个函数中,但前提是它很小,因为浏览器必须执行两次解析该代码并将其字符串化的无关工作。
script.textContent = '(' + (() => {
// the actual contents of api.js
// .......
}) + ')()';
如果您在运行代码之前构建代码(例如通过 node.js),您可以编写一个脚本来嵌入 api.js 的内容,例如在内容脚本中的特殊注释占位符之后。
关于javascript - 如何从 Chrome devtools 扩展 "before"页面加载中公开函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53370965/