reason
When my computer is plugged into the earphone, the external sound will not automatically turn off, and the realtek高清晰音频管理器settings inside are still useless. Then I thought that it was probably because of the frequent updates of win10 recently, and the manager version was wrong, so I went to the realtek official website to download the latest Of, then. . . I clicked the gobutton and didn’t respond. I took a look at the habitual f12 and found that the console reported an error with
jQuery. Then I looked at the network and found that the way to introduce jquery by cdn failed to load. https://code.jquery.com/jquery-1.12.4.min.js
There is only one truth, and the introduction of jQuery failed, I went to Baidu I learned how to inject external scripts into the website and found that it can be achieved with chrome plug-in technology. Then I went to the chrome official website and checked the document . If you don’t want to read English, you can go to the 360 speed browser plug-in document.
Getting started with chrome plugin
Import plugin
Achieved download
Sample code
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);