“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Browser extensions are small programs that modify and enhance the functionality of a WEB browser and can be used for a variety of tasks, such as blocking ads, managing passwords, organizing tabs, changing the look and behavior of WEB pages, and so on.

Browser extensions are not difficult for front-end developers because they are created primarily using the knowledge that the front-end is familiar with (HTML, CSS, and JavaScript), just like normal front-end projects. Unlike regular WEB projects, extensions have access to many browser-specific apis and can easily communicate with any WEB API across the constraints of the domain same-origin policy.

This article uses VUE to build a Chrome extension for the TOP 100 authors list. The code involved can be found on GItHub or downloaded from the devpoint-crx installation.

Basic knowledge of

A Chrome extension typically contains the following components:

  • Manifest.json: Tells The Chrome extension what it is, how to start it, and the additional permissions it needs.

  • Background.js: Used to create the event page responsible for managing the extender life cycle.

  • Code: includes HTML, JS, CSS, and Native Client modules.

  • I’ll start from ICONS

General steps to create a Chrome extension:

  1. Create manifest.json file;

  2. Create the background.js file,

  3. Create a window page

  4. Create the ICONS

  5. Run the Debug extension: Click the Chrome Settings icon -> More Tools > Extensions to open the Extensions Management page, open developer mode, and then load the undecompressed extension by selecting the folder.

Using VUE to develop the extension, just like ordinary VUE project development, on the basis of not changing the original VUE project development process, add the file manifest.json, as follows:

{" Manifest_version ": 2, "name": "DevPoint extension ", "description": "DevPoint extension ", "version": "0.0.2", "browser_action": { "16": "./statics/icons/logo-16.png", "19": "./statics/icons/logo-32.png", "38": "./statics/icons/logo-64.png" }, "icons": { "128": "./statics/icons/logo-128.png", "64": "./statics/icons/logo-64.png", "32": "./statics/icons/logo-32.png", "16": "./statics/icons/logo-16.png" }, "background": { "persistent": true, "scripts": [ "./statics/background.js" ] }, "permissions": [ "storage", "cookies", "activeTab", "tabs", "notifications", "<all_urls>", "http://*/", "https://*/" ], "offline_enabled": true, "content_security_policy": "script-src 'self' 'unsafe-eval' https://*.juejin.cn ; object-src 'self'", "content_scripts": [], "web_accessible_resources": [ "*" ] }Copy the code

Some of the more important attributes in the above code are:

  • Permissions: Sets permissions related to controlling browsers, such as activeTab

  • Content_security_policy: Used to relax THE CSP (content security policy) in a limited way. Normally, front-end projects cannot properly interact with data from other sites through AJAX. This configuration is used to whitelist communications.

The next step is to add background.js, which is mainly to implement Chrome event-based logic, as follows:

/* eslint-disable no-undef */ ((chromeHelper) => {// Get the current TAB ID const tabUrl = chromeHelper.extension.getURL("index.html"); let tabId = 0; const getCurrentTabId = ( callback, options = { active: true, currentWindow: true } ) => { chromeHelper.tabs.query(options, (tabs) => { if (callback) callback(tabs.length ? tabs[0].id : null); }); }; const openUrlTab = (url, openedId, callback) => { const tabOptions = { url: url }; if (openedId === 0) { chromeHelper.tabs.create(tabOptions); getCurrentTabId((currentId) => { callback(currentId); }); } else { chromeHelper.tabs.update(openedId, { active: true }, (res) => { if (! res) { chromeHelper.tabs.create(tabOptions); getCurrentTabId((currentId) => { callback(currentId); }); }}); }}; chromeHelper.browserAction.onClicked.addListener(() => { openUrlTab(tabUrl, tabId, (currentId) => { tabId = currentId; }); }); })(chrome);Copy the code

The above code makes it possible to click the plugin icon to open a new TAB and jump to the plugin page, but then click the plugin icon to go back to the plugin TAB when the browser has other TAB information.

To better debug the VUE plug-in, add a startup script, modify package.json, and add a command for debugging the plug-in.

VUE_APP_VERSION=1.0.0 vue-cli-service build --watch",Copy the code

Overwrite Chrome’s new TAB page

When a new TAB is displayed, you need to modify chrome_url_overrides configuration to do this. The main configuration is to modify manifest.json ‘configuration as follows:


"chrome_url_overrides": {

"newtab": "index.html"

},

Copy the code

This configuration item has three main properties, as follows:

  • Bookmarks: The page that appears when the user selects the Bookmark Manager menu item from the Chrome menu or selects the Bookmark Manager item from the Bookmarks menu on the Mac. This page can also be accessed by entering the URL Chrome :// Bookmarks.

  • History: The page that appears when the user selects the history menu item from the Chrome menu or displays the full history item from the History menu on the Mac. This page can also be accessed by entering the URL Chrome ://history.

  • Newtab: the page that is displayed when the user creates a newtab or window. You can also access this page by entering the URL chrome://newtab. This option is used by the nugget plugin.

An expansion

If you want others to download your extension, you can do so by publishing it to the Chrome Web Store.

To package the extension through Chrome Extension Management, click the button to select the dist folder in the project folder

Click the button to package the extension and wait for the prompt..crx is the extension installer. To complete the installation, type Chrome :// Extensions/in Google Chrome and drag the file to it.

Because the extension has not been released, it cannot be opened properly in Chrome. If you are interested, I suggest you pull down the code and open it in development mode.

conclusion

This article briefly describes how to use VUE to create a Chrome extension, usually by adding manifest.json and backgroud.js to the public folder. The code simply implements a list of gold-digger users, not the most appropriate scenario, but to show what Chrome extensions can do.