javascript 在 Google Chrome 中注册 DOMContentLoaded

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5082094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 15:53:17  来源:igfitidea点击:

Register DOMContentLoaded in Google Chrome

javascriptgoogle-chromegoogle-chrome-extension

提问by alex

In Firefox and Safari i managed to register the DOMContentLoaded event with window.addEventListener('DOMContentLoaded', PageShowHandler, false);by inserting this statement into the js script that gets inserted, or more clearly, get executed after the dom of the page is loaded, my specific functions managed to run at every time the DOM of this specific page was loaded.

在 Firefox 和 Safari 中,我设法使用window.addEventListener('DOMContentLoaded', PageShowHandler, false);注册了 DOMContentLoaded 事件通过将此语句插入到被插入的 js 脚本中,或者更清楚地,在页面的 dom 加载后执行,我的特定功能在每次加载此特定页面的 DOM 时都设法运行。

I can't seem to do this in Chrome. I made some trick with the chrome.tabs.onUpdatedet al events but it doesn't work in every instance; all these events don't add up to what the DOMContentLoaded achieves. For example when i click on specific links on my webpage this doesn't inject my code as my DOMContentLoaded event could have done.

我似乎无法在 Chrome 中执行此操作。我对chrome.tabs.onUpdated等事件做了一些技巧,但它并不适用于所有情况;所有这些事件加起来都不是 DOMContentLoaded 所实现的。例如,当我点击网页上的特定链接时,这不会像我的 DOMContentLoaded 事件那样注入我的代码。

window.addEventListener('DOMContentLoaded', PageShowHandler, false);

introduced into inject.jsdoesn't seem to register the event.

引入inject.js似乎没有注册事件。

This is the manifest:

这是清单:

{
"name" : "gMail Adder ",
"version" : "1.0",
"description" : "Google Chrome Gmail Adder",
"options_page": "options.html",
"background_page": "background.html",
"run_at": "document_start",
"permissions": [
   "tabs",
   "history",
   "http://*/*",
   "https://*/*"
],
"content_scripts": [
  {
   "matches": ["*://*.google.mail.com/*", "https://*.google.mail.com/*"     ,"http://mail.google.com/*" ,"https://mail.google.com/*", "https://www.google.com/*", "http://www.google.com/*", "file:///*"],
   "css": ["toggle.css"],
   "js": ["jquery-1.4.4.min.js", "inject.js"]
  }
],
"browser_action" : {
"default_icon" : "Quest Icon 11.png",
"default_popup": "popup.html"
}
}

回答by serg

If you add "run_at":"document_start"flag to content scripts in the manifest they will be injected before DOM is constructed, so DOMContentLoadedshould be triggered every time:

如果"run_at":"document_start"在清单中向内容脚本添加标志,它们将在构造 DOM 之前注入,因此DOMContentLoaded每次都应触发:

"content_scripts": [
  {
   "matches": ["*://*.google.mail.com/*", "https://*.google.mail.com/*"     ,"http://mail.google.com/*" ,"https://mail.google.com/*", "https://www.google.com/*", "http://www.google.com/*", "file:///*"],
   "css": ["toggle.css"],
   "js": ["jquery-1.4.4.min.js", "inject.js"],
   "run_at": "document_start"
  }
],

(more about execution order here)

(更多关于执行顺序在这里

回答by alex

I managed to get things working by using the DOMFocusInevent in my injected script. This event correctly mimics the trigger behavior that DOMContentLoadedachieves in Firefox and Safari.

我设法通过在我注入的脚本中使用DOMFocusIn事件来使事情工作。此事件正确模拟了DOMContentLoaded在 Firefox 和 Safari 中实现的触发行为。

window.addEventListener('DOMFocusIn', PageShowHandler, false);

This doesn't work properly if i don't set to truethe "all_frames"field in "contents_scripts":

如果我没有设置这并不正常工作真正“all_frames”在现场“contents_scripts”

{
"name" : "gMail Adder ",
"version" : "1.0",
"description" : "Google Chrome Gmail Adder",
"options_page": "options.html",
"background_page": "background.html",
"run_at": "document_start",
"permissions": [
   "tabs",
   "history",
   "http://*/*",
   "https://*/*"
],
"content_scripts": [
  {
   "matches": ["*://*.google.mail.com/*", "https://*.google.mail.com/*" ,"http://mail.google.com/*" ,"https://mail.google.com/*", "https://www.google.com/*", "http://www.google.com/*", "file:///*"],
   "css": ["toggle.css"],
   "js": ["jquery-1.4.4.min.js", "inject.js"],
   "all_frames" : true
  }
],
"browser_action" : {
"default_icon" : "Quest Icon 11.png",
"default_popup": "dialog.html"
}
}