Write a Chrome plugin by hand

directory

1. Demand analysis
2. Official website Demo Introduction
3. Manifest configuration file
4. Implementation approach
5. The core code
6. Implementation effect

I do not know if you have similar experience, when consulting information, often open a pile of temporary TAB labels, not to join the point of collection, but directly closed to find and trouble, and squeezed by a pile to find up also very fee eyes……

Is there a tool that can save my tabs and view them easily?

Inspired by the Evernote clipping plugin, I found OneTab, which closes all tabs with one click and saves them to a single page:

Out of curiosity, I went to see: How to write a Chrome plugin?

Open a bunch of tabs……. again

To write a Chrome plugin, you need the technical foundation: HTML, JS, CSS.

????? Is this it? This is not my front end cut figure son three board axe? !

Don’t say a word, just masturbate!

Demand analysis

First, analyze my needs:

1. Save open web page address;
2. After reading it, you can easily delete it;
3. It is best to save all with one key;
4. And a one-click delete;
5. And a one-button full open;

.

Hold on, hold on. Finish your core needs first.

Official website Demo Introduction

According to the instructions on the website, the plug-in should contain the following files:

• A manifest file
• One or more HTML files (unless the application is a skin)
• Optional one or more JavaScript files
• Optional any other files required, such as pictures

I don’t know what manifest is, but everything else is a familiar recipe. Google official is also very close to gives the introduction demo:storage.googleapis.com/chrome-gcs-…

After downloading it, you can see the following files:

Open Chrome, choose Extension > More Tools > Extensions in the upper right corner, click Load the unzipped extension, select the folder above, and you can see the loaded demo plug-in.

Manifest configuration file

Let’s take a look at the manifest.json configuration in the demo:

{
  "name": "Getting Started Example"."description": "Build an Extension!"."version": "1.0"."manifest_version": 3."background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"."activeTab"."scripting"]."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"
  },
  "options_page": "options.html"
}
Copy the code

Configuration instructions

Among them,

• Permissions are:
  • Tabs: Access the TAB page.
  • Storage: access cache;
  • UnlimitedStorage: unlimited cache.

More access configuration instructions see website: developer.chrome.com/docs/extens…

• actionI’m using version 2 of Listing 2 herebrowser_actionThe action in version 3 did not popup the popup TAB. I guess I used the wrong pose…… (If you know children’s shoes, you can leave a message and tell me how to use them.)

Modified configuration file:

{
    "manifest_version": 3."name": "Read the TODO list"."version": "1.0.0"."description": "Save tabs with one click, easily manage temporary tabs"."icons":
    {
        "16": "images/icon.png"."48": "images/icon.png"."128": "images/icon.png"
    },
    "browser_action":
    {
        "default_icon": "images/icon.png"."default_title": "Reading List -by Walking"."default_popup": "popup.html"
    },
    "permissions":
    [
        "tabs"."storage"."unlimitedStorage"]."options_page": "options.html"."homepage_url": "https://github.com/youzouzou/my-chrome-plugin-read-todo"
}
Copy the code

• Homepage_url: extension site, which points to my Github open source address 🙂

Implementation approach

TODO lists are a little more trivial, but simply maintain an array and use the local cache GET /set to add, delete, change, and query.

The core code

With configuration out of the way, now comes the familiar HTML/JS/CSS trivia.

In popup.html I defined three buttons: Add reading List, View List, and Add All open TAB.

<div id="addBtn">Add to your reading list</div>
<div id="viewBtn">Look at listing</div>
<div id="addAll">Add all open TAB</div>
Copy the code

Listen for button click events:

const addBtn = document.getElementById("addBtn")
addBtn.addEventListener("click".async () => { });
Copy the code

Add to your reading list

Adding to a reading list saves the url and title of the current TAB into a cache array, which involves three Chrome apis.

1. Gets the URL and title of the current TAB

chrome.tabs.getSelected(null.function (tab) {
  console.log(tab.url, tab.title)
});
Copy the code

2. Gets the current cached TAB array

chrome.storage.sync.get("tabs".({ tabs }) = >{});Copy the code

3. Update the TAB array in the cache

chrome.storage.sync.set({ "tabs": newTabList });
Copy the code

Look at listing

viewBtn.addEventListener("click".async() = > {window.open(chrome.extension.getURL('list.html'));
});
Copy the code

A new TAB page opens, pointing to the list.html file. I present a cached TAB array on this page and provide the ability to open/delete a single URL and open/delete all in one click.

Add all open TAB

This is similar to adding a single TAB, but requires an extra API to retrieve all tabs for all Windows:

chrome.windows.getAll({ populate: true }, function (windows) {
      windows.forEach(function (window) {
        window.tabs.forEach(function (tab) {
          // iterate over all tabs
        });
      });
});
Copy the code

Core code is the basic API, specific implementation can refer to demo: github.com/youzouzou/m…

Interested students can download the demo, load the unzipped extension, and see how it works. It’s also easy to package a.crx file. Open the extension and click Package extension:

You can also sign up for a developer account and upload your plugins to the Chrome Web Store for other users to buy and download.

Implementation effect

Note: The reading TODO list here points to the homepage_URL; The option points to options_page.

conclusion

The functionality is much more rudimentary than the OneTab, but this experiment opened the door to a new world of ideas for solving problems in the future.