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

问题描述

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

Chrome扩展程序对我来说是新的理由，您的帮助将不胜感激。

解决方案

参考文献：

• 内容脚本


• 清单文件

您可以将以下代码作为添加HTML代码的参考。

manifest.json

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

  {
name ：注入DOM，
description：http://stackoverflow.com/questions/14068879，
version：1，
manifest_version：2 ，
content_scripts：[
 {
匹配：[http://www.google.co.in/*\",\"https://www.go ogle.co.in/*]，
js：[myscript.js] 
} 
] 
} 
  

myscript.js

一个用于向 Google 页面添加按钮的简单脚本

  //检查页面标题
 if（document.title.indexOf（Google）！= -1）{
 //创建元素
 var btn = document.createElement（BUTTON）
 var t = document.createTextNode（CLICK ME）; 
 btn.appendChild（t）; 
 //追加到DOM 
 document.body.appendChild（btn）; 
} 
  

输出

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

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

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

解决方案

References:

• Content Scripts
• Manifest File

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

manifest.json

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

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屋！