There is a long way to go, so let’s learn how to make a simple browser plug-in.
Homemade Google chromeExtensions
Small white novice road, first to do a simple demo!
The first step
Create a folder forDemo
Create manifest.json in the folder
{
"name": "hello world"."version": "1.0"."description": "Create your own browser plug-in"."manifest_version": 2
}
Copy the code
Activate your own plugin
- Enter the chrome: / / extensions
- Open developer mode
- Click “Load unzipped extension”
- Select the forDemo folder
- Get your first homemade browser plug-in
The first step has been successful. Start to understand background
Create a background. Js
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
Copy the code
Modify manifest.json as follows and add background configuration
{
"name": "Getting Started Example"."version": "1.0"."description": "Build an Extension!"."background": {
"scripts": ["background.js"]."persistent": false
},
"manifest_version": 2
}
Copy the code
Update the plugin
View the results
- Take a look at the background page we made.
- Ha ha, found an error
Solve it! Modify the manifest. Json
- Add the permissions option because background.js uses the storage API
{
"name": "Getting Started Example"."version": "1.0"."description": "Build an Extension!"."permissions": ["storage"]."background": {
"scripts": ["background.js"]."persistent": false
},
"manifest_version": 2
}
Copy the code
Update the plug-in to see the results
Congratulations, you’ve tentatively completed a browser plug-in
Next, popup~~~
Create popup. HTML
<! DOCTYPEhtml>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
Copy the code
Modify the manifest. Json
- Add page_action to specify popup.html and display icon, modify permissions section
- Create the images folder under forDemo
- Download a few ICONS from iconfont
{
"name": "Getting Started Example"."version": "1.0"."description": "Build an Extension!"."permissions": ["declarativeContent"."storage"]."background": {
"scripts": ["background.js"]."persistent": false
},
"page_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"}},"icons": {
"16": "images/get_started16.png"."32": "images/get_started32.png"."48": "images/get_started48.png"."128": "images/get_started128.png"
},
"manifest_version": 2
}
Copy the code
Change background. Js
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
/*in*/
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()
]
}]);
});
/*in*/
});
Copy the code
Reload the
Get a browser plugin with your own stamp!
Next, we use plug-ins to modifywww.iconfont.cnBackground color!
Create pop.js with the following code
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.querySelector(".collections-lists").style.backgroundColor = "' +
color +
'"; '}); }); };//in
Copy the code
Modify popup.html to introduce script tags
<! DOCTYPEhtml>
<html>.<body>
<button id="changeColor"></button>
<! -- in -->
<script src="popup.js"></script>
</body>
</html>
Copy the code
Change background. Js
chrome.runtime.onInstalled.addListener(function () {
chrome.storage.sync.set({ color: '#3aa757' }, function () {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined.function () {
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostEquals: 'www.iconfont.cn'}}),].actions: [new chrome.declarativeContent.ShowPageAction()],
},
]);
});
});
Copy the code
Modify pernisson list, add activeTab, declarativeContent
{
"name": "Getting Started Example"."version": "1.0"."description": "Build an Extension!"."permissions": ["activeTab"."declarativeContent"."storage"]."background": {
"scripts": ["background.js"]."persistent": false
},
"page_action": {
"default_popup": "popup.html"."default_icon": {
"16": "images/apple.png"."32": "images/pineapple.png"."48": "images/strawberry.png"."128": "images/cabbage.png"}},"icons": {
"16": "images/apple.png"."32": "images/pineapple.png"."48": "images/strawberry.png"."128": "images/cabbage.png"
},
"manifest_version": 2
}
Copy the code
Refresh the plugin and start your plugin
Open the web site
- www.iconfont.cn/illustratio…
- Use your plugin
- Plugin made successfully!!
The last
Search Eval Studio on wechat for more updates.