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