使用 chrome 扩展修改加载页面的 HTML [英] Modify HTML of loaded pages using chrome extensions

问题描述

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

How can I add some HTML code to the loaded page if page's title contains specific text?

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

Chrome extensions are new grounds to me and your help would be greatly appreciated.

推荐答案

参考文献:

• 内容脚本
• 清单文件

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

You can take the following code as a reference for adding some HTML Code.

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

This file registers content script to extension.

{
"name":"Inject DOM",
"description":"http://stackoverflow.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 页面添加按钮的简单脚本

myscript.js

A trivial script for adding a button to Google page

// 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

You see a button added to a desired page

这篇关于使用 chrome 扩展修改加载页面的 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！