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

缘由

我的电脑插入耳机后外音不会自动关闭，然后在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);

利用chrome插件，向页面中注入js脚本相关推荐

css 注入,electron程序，如何在主进程远程页面中注入js及css？
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 每日一篇的苏南大叔写代码教程,又来了.在本文中,苏南大叔描述的是,在electron程序加载远程页面的时候,如 ...
jsf取js变量_JSF页面中的JS取得受管bean的数据（受管bean发送数据到页面）
[问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: 删除- http://blog.csdn.net/xxjoy_777/articl ...
如何利用chrome插件tampermonkey突破百度云盘下载限制
自从360网盘宣布关闭,目前国内网盘市场应该就是百度网盘一家独大了.百度云盘(百度网盘)是非常方便好用的在线网盘,但要下载超过1G的文件则会提示"你下载的文件过大,需要使用百度云管家&quo ...
利用ClaudiaIDE插件在VS中插入图片
利用ClaudiaIDE插件在VS中插入图片效果图下载设置插件效果图下载 github链接找到相应的版本如下图所示我下了个2019的链接: 百度网盘提取码:5xi8 设置插件打开VS中 ...
html页面中使用 JS 返回上一页及返回上一页并刷新，iframe中打开指定页面，跳转到指定页面
html页面中使用 JS 返回上一页及返回上一页并刷新,iframe中打开指定页面,跳转到指定页面. 常用方法: window.history.go(-1); //返回上一页 window.histo ...
js代码父页面调用子页面中的js方法，子页面调用父页面中的js方法
文中代码亲测可用,转载以示尊重!!!  <script type="text/javascript"> //调用子页面的方法 ...
浏览器自动注入js脚本
浏览器自动注入js脚本网页一般把js函数放在head元素内,注入js脚本实际上就是给head元素添加一个script的子元素. 在木头浏览器项目管理器中新建一个填写内容的步骤,添加填写项 ...
不属于jsp构成元素_JSP 页面中不能包含脚本元素。( )_学小易找答案
[单选题]<悬崖边的树>一诗的作者是 _______________ . [填空题]根据四川省建筑工程定额,机械挖土外运时,外运距离不扣除( ). [单选题]<在一个地铁车站> ...
Chrome谷歌浏览器在DevTools中调试JS代码格式化
大家在Chrome浏览器中调试JS代码时经常看到的是被压缩后的JS代码,可读性很差,在DevTools中js页面最下面有个格式化的图标**{}**,如下图所示: 点击格式化后会打开新的视图,新js名称 ...

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

缘由

chrome插件入门

实现了下载

示例代码

利用chrome插件，向页面中注入js脚本相关推荐

最新文章

热门文章