草庐IT

javascript - Chrome 内容脚本不工作 : DOMContentLoaded listener does not execute

coder 2024-05-15 原文

我正在尝试编写可纠正 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 )之后注入(inject)脚本。因此，您在监听器中的任何代码都不会执行，因为在您添加监听器后该事件永远不会触发。

在 Chrome 扩展和 Firefox WebExtensions 中，当为 content script 指定时间时要被注入(inject)，你可以指定"document_start"，"document_end"，或者"document_idle"。1中manifest.json 这是为 run_at 属性声明的值。对于 tabs.executeScript() ，它是 runAt 属性。

  • document_start
    注入(inject)发生在创建 DOM 或运行页面脚本之前。这意味着 document.body 和 document.head 还不存在。 DOMContentLoaded 和 window load 事件尚未触发。您可以通过将内容添加到 document.documentElement 来将内容添加到 DOM。您可能需要使用 MutationObserver观察您有兴趣添加到 DOM 的元素，或等待 DOMContentLoaded 之类的事件来指示 DOM 可用。
  • document_end(默认)
    注入(inject)发生在 DOM 完成之后，但在加载子资源(例如图像和框架)之前。这通常发生在 DOMContentLoaded 触发之后，但在 window load 事件触发之前。

  • document_idle
    注入(inject)发生在 document_end 之后的某个时间，紧接在 window load 事件触发之后。 answer to "When does a run_at: document_idle content script run?"表示这是较早的:

    • window load 事件触发后，或者
    • DOMContentLoaded 事件触发后 200 毫秒。

    这意味着您的内容脚本将在 DOMContentLoaded 触发后被注入(inject)，但是 window load 事件可能有也可能没有已经解雇了。

监听DOMContentLoaded时, 或 window load, 你应该检查 document.readyState第一

任何时候你使用一个DOMContentLoaded监听器，或者一个windowload监听器，你应该总是检查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.
}
  1. 如果您正在使用 tabs.executeScript()，您为 runAt 提供的值仅表示您希望脚本注入(inject)的最早时间。如果您在此时间之前执行 tabs.executeScript()，则注入(inject)会延迟到指定时间。请注意，对于 document_start，执行 tabs.executeScript() 时对新页面有效的时间点是一个复杂的主题，值得单独提问/回答。
  2. 此答案的部分内容复制自 my answer to "Detect and handle a button click in the active HTML page" .

关于javascript - Chrome 内容脚本不工作 : DOMContentLoaded listener does not execute，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43233115/

DOMContentLoadedjavascriptcodedocumentgoogle-chromegoogle-chrome-extensioncontent-script

有关javascript - Chrome 内容脚本不工作 : DOMContentLoaded listener does not execute的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  4. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  5. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  6. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg

  7. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  8. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  9. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  10. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

随机推荐