正文

使用 chrome 扩展修改加载页面的 HTML

 2023-02-23  61

关键词：

【中文标题】使用 chrome 扩展修改加载页面的 HTML【英文标题】：Modify HTML of loaded pages using chrome extensions 【发布时间】：2012-12-13 16:21:31 【问题描述】：

如果页面标题包含特定文本，我如何向加载的页面添加一些 HTML 代码？

Chrome 扩展程序对我来说是新的领域，非常感谢您的帮助。

【问题讨论】：

【参考方案1】：

参考资料：

Content Scripts Manifest File

您可以参考以下代码添加一些 HTML 代码。

`manifest.json`

此文件将内容脚本注册到扩展。


"name":"Inject DOM",
"description":"http://***.com/questions/14068879",
"version":"1",
"manifest_version":2,
"content_scripts": [
    
      "matches": ["http://www.google.co.in/*","https://www.google.co.in/*"],
      "js": ["myscript.js"]
    
  ]

`myscript.js`

向Google页面添加按钮的简单脚本

// Checking page title
if (document.title.indexOf("Google") != -1) 
    //Creating Elements
    var btn = document.createElement("BUTTON")
    var t = document.createTextNode("CLICK ME");
    btn.appendChild(t);
    //Appending to DOM 
    document.body.appendChild(btn);

`Output`

您会看到一个添加到所需页面的按钮

【讨论】：

有人能详细说明如何从这两个文件 --> 到本地扩展文件 --> 到已安装的扩展吗？ @Luke 使用这样的模板：github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template 对于开发，我发现解决方案是转到 chrome://extensions，选中开发人员模式复选框，然后加载解压缩的扩展程序，然后选择包含文件的目录。 fyi，DOM 不是 HTML，如果您的意图是从网络服务器获取一些 HTML，并且在它被解析为 DOM 并在浏览器中显示之前，编辑它，这是给你的错误答案..继续谷歌搜索... 我们如何修改 HTML 页面上的现有内容？【参考方案2】：

@Sudarshan 的回答解释了页面特异性，很好，但是添加的 cmets 呢？以下是如何以更简单更实用的方式完成他错过的事情要修改现有内容或在页面上创建内容，最简单的方法是：

修改

单项修改：

document.getElementById("Id").innerHtml = this.innerHtml + "<some code here>";

或修改属性：

document.getElementById("Id").class = "classname";

//or ->

document.getElementById("Id").style.color = "#a1b2c3";

要添加多行代码，请执行以下操作：

document.getElementById("Id").innerHtml = this.innerHtml + `
 <some code here>                                                            <!-- Line 1 -->
 and we're on multiple lines!` + "variables can be inserted too!" + `        <!-- Line 2 -->
 <this code will be inserted directly **AS IS** into the DOM                 <!-- Line 3 -->
`
;

但是现在如何轻松插入元素呢？

创建

大型代码注入（来自不久前完成的编码项目的示例）请参阅insertAdjacentHtml API：

var bod = document.getElementsByTagName('body')[0];

bod.insertAdjacentHTML('afterbegin', `
    <div class="Boingy" id="Boingy">
        <div class="Boihead" id="BoiHead">
            <div class="deXBox" id="deXBox">
                <div class="Tr-Bl_Button" style="height: 25px;width: 2px;margin-left: 11.65px;background-color: gray;transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);Z-index: 1;">
                    <div class="Tl-Br_Button" style="height: 25px;width: 2px;background-color: gray;transform: rotate(90deg);-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);Z-index: 2;">
                        </div>
                    </div>
                </div>
            </div>
            <embed id="IframeThingyA" src="` + "url" + `" type="text/html">
            </embed>
        </div>
    `);

参考：

insert - Adjacent - Html content specific code

【讨论】：

可以在页面加载后拦截 ajax 加载的 HTML/数据的 Google Chrome 扩展

】可以在页面加载后拦截ajax加载的HTML/数据的GoogleChrome扩展【英文标题】：GoogleChromeExtensionthatcaninterceptajaxloadedHTML/dataafterpagehasloaded【发布时间】：2014-08-0819:20:25【问题描述】：所以我想尝试一下这个概念，但第一步是看看我能... 查看详情

我可以在加载之前在 Chrome 扩展程序中创建一个 html 页面吗？

】我可以在加载之前在Chrome扩展程序中创建一个html页面吗？【英文标题】：CanIcreateahtmlpageinChromeextensionbeforeit\'sloaded?【发布时间】：2017-01-3120:51:06【问题描述】：我需要拦截对特定服务器的第一个请求，让它成为http://google.com，... 查看详情

在 chrome 扩展中使用页面的 Angular JS

】在chrome扩展中使用页面的AngularJS【英文标题】：Usingpage\'sangularJSinchromeextension【发布时间】：2014-04-0316:26:31【问题描述】：我有一个HTML页面，其中有一些用Angular配置的DOM。现在我正在构建一个chrome扩展来修改文本框中的值。el... 查看详情

Chrome 扩展 - 在浏览器上加载 js 之前获取 Html DOM

】Chrome扩展-在浏览器上加载js之前获取HtmlDOM【英文标题】：Chromeextension-getHtmlDOMbeforeloadjsonbrowser【发布时间】：2015-08-2720:23:45【问题描述】：我正在开发一个chrome扩展，它需要阻止html页面的加载，对页面中的javascript进行一些验... 查看详情

chrome扩展程序获取当前页面url和html内容

先交代一下manifest.json中的配置//引入注入脚本"content_scripts":[{"js":["content_script.js"],//在什么情况下使用该脚本"matches":["http://*/*","https://*/*"],//什么情况下运行【文档加载开始】"run_at":"document_start"}],{"permissions":["tabs"]}1. 查看详情

Chrome 扩展：阻止来自外部域的内容被加载到特定域的页面中

...问题描述】：我正在构建一个在我无法控制的社交网站上使用的扩展程序。该网站允许用户插入来自其他域的内容（图像、flash等）。我想阻止这个。查看详情

Contents.js 阻止页面加载 chrome 扩展

】Contents.js阻止页面加载chrome扩展【英文标题】：Contents.jsblockingpageloadchromeextension【发布时间】：2021-11-0103:45:28【问题描述】：大家好，我正在构建一个扩展，但我有一个运行时很重的函数，它会阻塞页面的负载，我想知道是否... 查看详情

用于刷新页面的 Chrome 扩展

...DOM并仅提取带有新闻的文本节点。我已经尝试了多种方式使用rea 查看详情

Chrome 扩展内容脚本在页面刷新之前未加载

】Chrome扩展内容脚本在页面刷新之前未加载【英文标题】：ChromeextensionContentScriptnotloadeduntilpageisrefreshed【发布时间】：2014-01-1821:01:11【问题描述】：我有一个Chrome扩展内容脚本，我想在Trello板上运行。目前，它仅包含：console.log(... 查看详情

使用硒加载铬延伸(代码片段)

...商店或网址加载扩展程序的功能。请让我知道我正在尝试使用硒？答案我不确定为什么你特别关注从Webstore下载然后安装到Chrome。我找到了一些下载Chrome扩展程序的步骤：-使用连接到互联网的计算机，从扩展页面安装扩展程序：... 查看详情

命令行 chrome 扩展加载和测试

...题描述】：我目前在chromium浏览器的chrome://extensions页面上使用“开发者模式”，通过单击“重新加载(Ctrl+R)”来加载它。我希望能够对我解压后的chrome扩展程序进行更改并以自动方式将其加载到浏览器中，特别是因为我正在虚查看详情

如何从 chrome 扩展中读取文件？

...击浏览器操作加载弹出窗口时被调用。我正在以编程方式使用chrome.tabs.executeScript()注入内容脚本。我需要将一个元素附加到页面的正文中。如何在扩展名中插入来自不同.html文件的HTM 查看详情

使用 Chrome 扩展修改具有本地源的 iframe 的元素

】使用Chrome扩展修改具有本地源的iframe的元素【英文标题】：ModifyingelementsofaniframewithlocalsourcewithChromeextension【发布时间】：2015-09-1112:54:48【问题描述】：我现在正在处理Chrome扩展，但我遇到了权限/安全问题。我有一个本地HTML模... 查看详情

Chrome扩展，如何延迟脚本直到页面完全加载

】Chrome扩展，如何延迟脚本直到页面完全加载【英文标题】：Chromeextension,howtodelayscriptuntilpageisfullyloaded【发布时间】：2018-06-0623:16:39【问题描述】：我试图在选项卡中打开新网站地址后按类名获取DOM元素。问题是我不知道如何让... 查看详情

使用java编程加载chrome扩展

】使用java编程加载chrome扩展【英文标题】：Loadchromeextensionusingjavaprogramming【发布时间】：2016-12-0601:26:15【问题描述】：我已经创建了像IDM这样的下载管理器，并且我想安装chrome扩展程序。正如您在安装IDM时看到的，它会自动在... 查看详情

使用 selenium 加载 chrome 扩展

】使用selenium加载chrome扩展【英文标题】：Loadchromeextensionusingselenium【发布时间】：2016-03-1707:11:49【问题描述】：在运行selenium时，我需要从网上商店加载一个chrome扩展。在我的研究中，我只发现了如何从本地机器加载扩展。seleni... 查看详情

可以使用 chrome 扩展将 HTML 标记添加到网站吗？

】可以使用chrome扩展将HTML标记添加到网站吗？【英文标题】：CanHTMLmarkupbeaddedtoawebsiteusingachromeextension?【发布时间】：2015-02-0118:20:48【问题描述】：我正在尝试创建一个Chrome扩展程序，该扩展程序创建一个像普通按钮一样的按钮... 查看详情

如何使用 JavaScript 创建 Chrome 扩展来隐藏或删除页面元素？

】如何使用JavaScript创建Chrome扩展来隐藏或删除页面元素？【英文标题】：HowtocreateaChromeExtensiontoHideorRemoveaPageElementusingJavaScript?【发布时间】：2020-12-2809:48:22【问题描述】：我正在尝试创建一个ChromeExtension来操作页面上的HTML。扩... 查看详情