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.