Chrome 扩展程序将动态脚本注入标头和打开 body 标签后

Question

我正在尝试构建一个 Chrome 扩展程序，我将尝试将一些动态 javascript 注入 a) 页面的标题 b) 页面的正文但是这应该在页面加载时添加我正在努力解决现有文档。关于如何简单地完成这项工作的任何好的指导？

Answer 1

jQuery 解决方案

请记住，如果您在页面加载时添加此 javascript ，用户将在您的脚本更改/更新之前看到原始内容的短暂闪烁。

在 jquery 中将 console.log 添加到 head 和 body：

添加到头部

$('head').append('<script>console.log("Script added to head")</script>');

添加到身体

$('body').append('<script>console.log("Script added to body")</script>');

确认

如果您将这两个都添加到您的 chrome 控制台，您应该看到如下内容：

Script added to head

Script added to body

如果您在 HTML (Jquery's $('html').html()) 中搜索此脚本，您会得到两个结果：

> regex = new RegExp(/<script>console\.log\("Script added to \w*?"\)<\/script>/, "g")

> pagetext = $('html').html().match(regex).length

2

当我们添加 2 行控制台日志“脚本已添加到 ...”时，我们确认已添加这些行。

何时加载

如果这是你的内容脚本，你不需要担心在嵌套这个在window.onload或类似的，如果你有"run_at": "document_end"在你的manifest.json（在内容脚本JSON）。