ChromeExtensions (1)

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="pop.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!!