Chrome plug-in tutorial 2 – a simple Chrome extension

Time:2022-5-23

Earlier, we introduced manifest JSON file We have a general concept of the directory and configuration of chrome extensions We’ll use the above chrome manifest JSON to write a very simple chrome plug-in Is to open websites in batches

Define directory

First, let’s define our development directory according to the previous First, we have to have a manifest json. Then our extension is located on the pop page So we have to have a pop HTML and pop js. Then we have to have an assets to store our icons With the above idea, we can get our initial catalog results as follows

manifest.json
popup.html
popup.js
assets/logo.png

In this way, we have made our preparations

Define manifest json

We need a pop page Then we need to have a tab permission to open the website Let’s first state a simple manifest json. as follows

{
  "Manifest_version": 3, // define the version
  "Name": "CRX"
  "Version": "1.0.0", // version number
  "Icons": {// icon definitions
    "16": "assets/logo.png",
    "48": "assets/logo.png",
    "128": "assets/logo.png"
  },
  "action": {
    "Default_popup": "popup. HTML" // define the default popup page
  },
  "Permissions": [// permissions used
     "tabs"
  ]
}

With the above, we need to write our pop page

Pop page

Our page is very simple All you need is a form and a textarea Just add two button buttons So the approximate code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Crx popup</title>
  <style>
    body{
      width: 300px;
      height: 400px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <form>
    <div class="form-item">
      <textarea name="urls" cols="30" rows="10"></textarea>
    </div>
    <div class="button-wrapper">
      < button type = "submit" > submit < / button >
      < button type = "reset" > Reset < / button >
    </div>
  </form>
<!--  Introduce pop js -->
<script></script>
</body>
</html>

We have defined our page And introduced pop js. Then we’re at pop Register onsubmit event in JS as follows

document.querySelector('form').onsubmit = function () {
  var urls = document.querySelector('[name=urls]').value

  if(!urls) {
    Return alert ('Please fill in the link ')
  }

  urls = urls.split('\n')

  urls.map((url) => {
    if(url.indexOf('http') !== 0) {
      url = 'http://' + url
    }
    //Batch open URL
    chrome.tabs.create({
      url: url
    });
  })

  return false;
}

Then we submit our method directly in the onsubmit event of the form

test

Open the Chrome extension Or enter the URL directly

chrome://extensions/

Then load the extracted extension Select our expansion pack Just do it Then you can see that you already have an extension in your extension Just open it and use it directly The interface is as follows
Chrome plug-in tutorial 2 - a simple Chrome extension
Although the interface is lower But we have achieved our goal Just adjust the page

last

Demo code