内容脚本是JavaScript文件,由浏览器扩展或附加组件使用。它们是可以与当前网页的文档上下文交互的扩展的一部分。这主要适用于Firefox或Chrome扩展程序。
使用 chrome.scripting.registerContentScripts 添加的脚本在打开弹出窗口之前不会注入
所以我有一个 Chrome 扩展,我需要将其更新到涉及注入内容脚本的 MV3。 通过弹出窗口,最终用户应该能够启用/禁用应注入的脚本,...
错误:不允许将跨源对象定义为 [Object] 或 [Array] XrayWrapper 上的属性
如何避免以下错误以及为什么会出现此错误? 编辑:也许我不得不问如何使特权范围内的对象对特权较低的范围可见。 我的目标是出口/退货
未捕获(承诺中)错误:无法加载文件“/public/content-script.bundle.js”。它不是 UTF-8 编码的。使用 chrome.scripting.executeScript
目标 我正在尝试创建一个 Chrome 扩展程序,它将在网页中嵌入 CodeMirror 编辑器。我使用 vite 捆绑 CodeMirror 包并使用 chrome.scripting.executeScript 运行我的
我正在尝试通过内容脚本从当前页面窗口获取对象。如果我记录窗口/此对象,则该对象本身可用,但是当我尝试通过内容脚本访问它时,它
Chrome 内容脚本不起作用:DOMContentLoaded 侦听器不执行
我正在尝试编写可纠正 1 个论坛上的拼写错误的扩展程序。 我正在尝试使用内容脚本访问 标签,但它不会改变任何内容(使用下面的代码): 文件。 我正在尝试编写可纠正 1 个论坛上的拼写错误的扩展代码。 我正在尝试使用内容脚本访问 <p> 标签,但它不会改变任何内容(使用下面的代码): document.addEventListener("DOMContentLoaded", function() { document.getElementsByTagName("P")[4].innerHTML = "correct_word"; }); 作为扩展添加时,它不会改变任何内容,显然,如果我wget页面,并将脚本放在那里,一切都有效。有什么想法吗? 我的manifest.json文件: { "manifest_version": 2, "name": "Extension", "description": "Description", "version": "1.0", "content_scripts": [{ "run_at": "document_end", "matches": ["http://example.com/"], "js": ["script.js"] }], "web_accessible_resources": ["Filedeleted(really).html"] } 我知道内容脚本和 WWW 页面有不同的沙箱,也许内容脚本无法访问页面(和标签)? 您将在监听火灾的事件之后注入脚本(在本例中为DOMContentLoaded)。因此,侦听器中的任何代码都不会被执行,因为在添加侦听器后该事件永远不会触发。 在 Chrome 扩展程序和 Firefox WebExtensions 中,指定注入 content script 的时间时,您可以指定 "document_start"、"document_end" 或 "document_idle"。1 在 manifest.json 中,这是为 run_at 属性指定的值。对于 tabs.executeScript(),它是 runAt 属性。 document_start 注入发生在创建 DOM 或运行页面脚本之前。这意味着 document.body 和 document.head 还不存在。 DOMContentLoaded 和 window load 事件尚未触发。您可以通过将内容添加到 document.documentElement 来将它们添加到 DOM。您可能需要使用 MutationObserver 来监视您感兴趣的要添加到 DOM 的元素,或者等待像 DOMContentLoaded 这样的事件来指示 DOM 可用。 document_end(默认) 注入发生在 DOM 完成之后、子资源(例如图像和框架)加载之前。这通常是在 DOMContentLoaded 触发之后、window load 事件触发之前。 document_idle 注入发生在 document_end 之后的某个时间以及在 window load 事件触发之后立即进行。 “run_at: document_idle 内容脚本何时运行?”的 答案 表示这是以下较早的一个: 在 window load 事件触发后,或者 DOMContentLoaded 事件触发后 200 毫秒。 这意味着您的内容脚本将在 DOMContentLoaded 触发后注入,但 window load 事件可能已经触发,也可能尚未触发。 听DOMContentLoaded或windowload时,应先检查document.readyState 任何时候您使用 DOMContentLoaded 侦听器或 window load 侦听器,您都应该在添加侦听器之前检查 document.readyState,以确保在 DOMContentLoaded 之前添加侦听器 事件被触发(或者在 load 事件被触发之前,如果您正在监听的话)。 当您想要监听这些事件时,这应该是正常习惯。如果您在事件触发后添加侦听器,则侦听器将永远不会运行。 要添加 DOMContentLoaded 侦听器,您应该使用类似以下内容: if(document.readyState === 'loading') { document.addEventListener('DOMContentLoaded',afterDOMLoaded); } else { afterDOMLoaded(); } function afterDOMLoaded(){ //Everything that needs to happen after the DOM has initially loaded. } 要添加 window load 侦听器,您可以使用类似以下内容: if(document.readyState !== 'complete') { window.addEventListener('load',afterWindowLoaded); } else { afterWindowLoaded(); } function afterWindowLoaded(){ //Everything that needs to happen after the window is fully loaded. } 如果您使用 tabs.executeScript(),则为 runAt 提供的值仅指示您希望注入脚本的最早时间。如果您在此时间之前执行 tabs.executeScript(),则注入会延迟到指定时间。请注意,对于 document_start ,执行 tabs.executeScript() 对新页面有效的点是一个复杂的主题,值得有自己的问题/答案。 此答案的部分内容复制自我对“检测并处理活动 HTML 页面中的按钮单击”的答案。 对于 manifest_version: 3,document_idle 是默认值,也是推荐值,根据官方文档。 此外,文档使得 chrome 看起来只会在内容之后加载内容脚本,但事实并非如此。如果您确实需要在内容完全加载后运行某些内容,则需要以下组合: window.load和document.readyState,在大多数情况下可以检测到加载完成,因此您可以在之后运行您的东西。它可能不适用于某些具有大量动态内容的页面。MutationObserver,检测动态内容并在第一个选项失败时重试运行您需要运行的任何内容。(可选)去抖动函数(我使用lodash/debounce),以避免突变观察器运行太多次。
EventTarget 在 Firefox 内容脚本中不起作用,但在 Chrome 中起作用
在 Chrome 扩展内容脚本中,可以这样做: const myTarget = new EventTarget() myTarget.addEventListener('test', () => console.log('test1')) myTarget.dispatchEvent(new Event('test')) ...
在 Google Chrome 中访问 pdf 时,浏览器使用自己的扩展来读取和显示 PDF。我想从本地源文件“file:///C:/Users/Test/Desktop/test%20extension...
目前我正在测试这段代码。我的目的是使用内容脚本抓取一些数据 这是我在后台文件中的内容 chrome.action.onClicked.addListener( (tab) => { // 铬。
如何使用 Chrome 扩展程序关闭当前的 Chrome 选项卡?
我即将完成一个简单的 Chrome 扩展的构建,我想添加的最后一件事是关闭当前选项卡。 这个扩展的作用是,当它检测到 Zoom 加入会议时...
我在页面脚本中定义的对象似乎无法在扩展的内容脚本中访问。但是这两个脚本确实共享一些变量,例如窗口,文档等。有没有办法暴露一些
未选中的runtime.lastError:消息端口在收到响应之前关闭。我该如何解决?
我有这个问题。我看到这个问题并尝试了它的解决方案,但它似乎不起作用。错误消失了,但代码没有执行它应该执行的操作。 所以,基本上,我有一个背景
Chrome 扩展 API:后台页面上的 chrome.tabs.captureVisibleTab 到内容脚本
我的总体目标是使用以下方法通过后台页面截取屏幕截图: http://developer.chrome.com/extensions/tabs.html#method-captureVisibleTab 并将其传递给内容脚本,以便我可以使用...
我正在编写一个谷歌浏览器扩展程序,可以单击链接和按钮。单击重定向按钮/链接并且页面发生更改后,我必须使用后台脚本撤销扩展...
我正在尝试将消息从后台脚本发送到我的 chrome 扩展程序中的内容脚本。但看起来消息是在加载内容脚本之前发送的? 这是我遇到的错误...
目前我正在测试这段代码。我的目的是使用内容脚本抓取一些数据 这是我在后台文件中的内容 chrome.action.onClicked.addListener( (tab) => { // 铬。
我有一个 chrome 扩展,其中有 2 个由清单注入的内容脚本和一个后台脚本。 { “清单版本”:2, “名称”:“测试”, “权限”:[ “选项卡”,“ 我有一个 chrome 扩展,其中有 2 个由清单注入的内容脚本和一个后台脚本。 { "manifest_version": 2, "name": "Test", "permissions": [ "tabs", "<all_urls>", "activeTab", "storage" ], "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": [ "content/autofill/lib_generic.js", "content/autofill/lib.js"], "run_at": "document_end" } ], "web_accessible_resources": [ "content/specific_scripts/*" ], "background": { "scripts": ["background.js"], "persistent": false } } lib_generic.js 包含一个名为 apply_forms(...) 的函数(其描述并不重要)。该函数是从 lib.js 文件调用的。但此过程不适用于多个页面,因此对于每个这样的页面,我都有一个特殊的脚本 - 也只有一个名为 apply_forms(...) 的函数。 我有一个函数,它将当前域作为输入并返回所需特定脚本的名称,或者如果应使用通用则返回false。 文件太多,逻辑也更复杂,所以我不能只在 (url, script) 指令中列出所有 "content_scripts" 对(我也不想将所有特定文件作为内容脚本注入)。 我在后台尝试过类似的操作(请注意,这仅用于演示): var url = ""; //url of current tab chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { if(changeInfo.status == "complete") { var filename = getSpecificFilename(url); chrome.tabs.executeScript(tabId, {file: filename}, function() { //script injected }); } }); 注意:getSpecificFilename(...) 将始终返回一个名称 但我在第 5 行得到 Unchecked runtime.lastError while running tabs.executeScript: Cannot access a chrome:// URL。 有人可以帮我吗?这是动态“覆盖”函数定义的好方法,还是我应该采用不同的方式(然后选择哪一种)。 谢谢。 这可能意味着您在扩展/内部页面上收到 onUpdated 事件(弹出?选项页面?分离的开发工具?)。 一个选项是按 URL 过滤: chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { if(changeInfo.status == "complete") { if(!tab.url.match(/^http/)) { return; } // Wrong scheme var filename = getSpecificFilename(url); chrome.tabs.executeScript(tabId, {file: filename}, function() { //script injected }); } }); 另一个(可能更好)的选择是让您的内容脚本请求此注入: // content script chrome.runtime.sendMessage({injectSpecific : true}, function(response) { // Script injected, we can proceed if(response.done) { apply_forms(/*...*/); } else { /* error handling */ } }); // background script chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) { if(message.injectSpecific){ var filename = getSpecificFilename(sender.url); chrome.tabs.executeScript(sender.tab.id, {file: filename}, function() { sendResponse({ done: true }); }); return true; // Required for async sendResponse() } }); 这样您就知道内容脚本被注入并启动了。 您已经在每个页面上都有内容脚本,您可以使用它们通过 import(chrome.runtime.getURL('other.js)) 加载其他脚本。 如果您使用 webpack 或 Parcel,这更容易处理,因为它们还会创建该 other.js 文件: https://github.com/awesome-webextension/webpack-target-webextension https://parceljs.org/recipes/web-extension/
WebExtensions:您可以访问网页获取的 JSON 对象吗
网页加载后有没有办法访问网页获取的 JSON 对象? 我知道我可以使用 webRequest api 来获取 JSON 资源的 url 并获取它...
我有一个 chrome 扩展的内容脚本,其中包含一个函数,该函数应该仅在单击特定按钮时触发。但我注意到,当按钮...
安装或升级我正在处理的 Chrome 扩展程序后,不会重新注入内容脚本(在清单中指定),因此需要刷新页面才能使扩展程序正常工作。是...