利用chrome插件，向页面中注入js脚本

九段刀客

已于 2023-12-18 03:28:44 修改

阅读量2.3w

点赞数 5

文章标签： chrome插件

于 2020-07-31 15:08:03 首次发布

本文链接：https://blog.csdn.net/weixin_35958891/article/details/107712677

版权

缘由

我的电脑插入耳机后外音不会自动关闭，然后在realtek高清晰音频管理器里面设置还是没有用，然后我就想到大概是最近win10经常更新，然后这个管理器版本不对导致的，于是就去realtek官网打算下载个最新的，然后。。。点go按钮没反应，习惯性的f12看一下，发现控制台报错
在这里插入图片描述
jQuery的问题，然后我到Network里看了一下，发现cdn的方式引入jquery加载失败https://code.jquery.com/jquery-1.12.4.min.js

那么真相只有一个，jQuery引入失败，我就去百度了一下怎么向网站注入外部脚本，发现用chrome插件技术可以实现，然后去chrome官网过了一下文档，不想看英文的可以去看360极速浏览器的插件文档

chrome插件入门

在这里插入图片描述
导入插件

实现了下载

在这里插入图片描述

示例代码

manifest.json

{
  "name": "插件demo",
  "version": "1.0",
  "description": "入门学习用",
    "permissions": ["activeTab","declarativeContent","storage"],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
      },
    "browser_action": {
      "default_popup": "popup.html",
       "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
      "content_scripts": [
    {"js":["content_scripts.js"],"matches":["<all_urls>"]}
  ],
      "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "options_page": "options.html",
   
  "manifest_version": 2
}

content_scripts.js

const theScript = document.createElement('script');
theScript.src = 'https://cdn.bootcss.com/jquery/3.2.1/jquery.js';
document.body.appendChild(theScript);

console.log('查看脚本是否注入成功')

background.js

'use strict';

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: 'pink'}, function() {
    console.log("color,pink");
  });
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
      chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {hostEquals: 'developer.chrome.com'},
        })
        ],
            actions: [new chrome.declarativeContent.ShowPageAction()]
      }]);
    });
});

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
      <style>
        .box{
          width: 200px;
          height: 400px;
        }
        button {
          height: 30px;
          width: 30px;
          outline: none;
        }
      </style>
    </head>
    <body>
      <div class="box">
        <h3>点击可以改变背景色和文字颜色</h3>
      <button id="changeColor"></button>
        
      </div>
        <script src="popup.js"></script>
    </body>

</html>

popup.js

'use strict';

let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});

 changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = "' + color + '";'});
    });
  };

options.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
      <style>
        .box{
          width: 200px;
          height: 400px;
        }
        button {
          height: 30px;
          width: 30px;
          outline: none;
        }
      </style>
    </head>
    <body>
      <div class="box">
        <h3>点击可以改变背景色和文字颜色</h3>
      <button id="changeColor"></button>
        
      </div>
        <script src="popup.js"></script>
    </body>

</html>

options.js

// 'use strict';

// const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];

// function constructOptions(kButtonColors) {
//   for (let item of kButtonColors) {
//     let button = document.createElement('button');
//     button.style.backgroundColor = item;
//     button.addEventListener('click', function() {
//       chrome.storage.sync.set({color: item}, function() {
//         console.log('color is ' + item);
//       })
//     });
//     page.appendChild(button);
//   }
// }
// constructOptions(kButtonColors);