1. What is Chrome

The Google Chrome plugin is made up of **background scripts, Content scripts, Page, UI Elements ** and various logic files,manifest.json. The extension component is created using Web development techniques: a compressed package of HTML, CSS, and resources such as JavaScript and images. The component of the extension will depend on its functionality and may not require every option.

2. Google Chrome plugin capability

The Chrome plugin provides a number of useful apis for us to use:

  • Bookmark control;

  • Download control;

  • Window control;

  • Label control;

  • Network request control, event monitoring;

  • Custom native menu;

  • Communication mechanism;

  • And so on;

3. Configuration file (manifest.json)

Manifest.json is a required configuration file for the Google Chrome plugin, which is used to configure all plugin-related configurations, and must be located in the root directory. You must configure manifest_version, name, and version.

{// Manifest file version, this must be written, and must be 2 "Manifest_version ": 2, // Plug-in name" name": "demo", // plug-in version" version": "1.0.0", // plugin description" description": "simple Chrome extension demo", // general lazy all use one size also no problem" ICONS ": {"16": "img/icon. "Img /icon.png", "128": "img/icon.png"}, // will always be permanent background JS or background page" background": {// 2 specified methods, if specified JS, will automatically generate a background page" page": "background.html" //"scripts": ["js/ background-js "]}, // set the icon in the upper right corner of the browser, browser_action, page_action, app must choose one of the three "browser_action": {"default_icon": "Img /icon.png", // icon hovering title, optional "default_title":" This is a sample Chrome plugin ", "default_popup": /*"page_action": {"default_icon": "img/icon.png", "default_title": "I am pageAction", "default_popup": "popup.html"},*/ / [" http:// * / * ", "https:// * / *"], / / "< all_urls >" means to match all address "matches" : [" < all_urls > "], / / multiple JS injection in sequence "JS" : ["js/jquery-1.8.3.js", "js/content-script.js"], // Javascript injection can be arbitrary, but CSS should be paid attention to, because it can affect the global style "CSS ": [" CSS /custom.css"], // Time of code injection, optional values: "Document_start ", "document_end", or "document_idle", the last one indicates that the page is idle, default document_idle" run_at": "Document_start"}, // Just to demonstrate that content-script can be configured with multiple rules {"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"], "js": ["js/ show-image-content-sie.js "]}], // permissions: ["tabs", // notifications", // webRequest", // web request "webRequestBlocking", "storage", ExecuteScript or insertCSS (http://*/*); // executeScript or insertCSS (https://*/*); Web_accessible_resources = web_accessible_resources = "web_accessible_resources"; ["js/inject.js"], // plugin homepage, this is very important, don't waste this free advertising space "homepage_url": "https://www.baidu.com", // override the browser default page "chrome_url_overrides": {// override the browser default newtab" newtab": "Newtab.html"}, // before Chrome40 plugin configuration page written "options_page": "Options_ui ": {"page": {"page": "Options. HTML ", // add some default styles, "chrome_style": true} is recommended, // Register a keyword to the address bar to provide search suggestions, only one keyword can be set "omnibox": {"keyword" : "Go"}, // default language "default_locale": "zh_CN", // devTools page entry, note only one HTML file, not JS file "devtools_page": "devTools.html"}Copy the code

4. Vue-cli3 development of Google Browser plug-in practice

Set up the environment

  • Create a project with vuE-cli3: vue create Vue-extension.
  • Go to the created project CD VUe-Extension
  • NPM ivue-cli-plugin-chrome-ext: NPM ivue-cli-plugin-chrome-ext: NPM ivue-cli-plugin-chrome-ext
  • Delete the folders SRC /main.js and SRC /components that are useless for Chrome

Run the project NPM run build-watch run the development environment, compile the modified files in real time and automatically generate the dist folder in the root directory, then load the dist folder in the browser to complete the installation of NPM run build, run the production environment, compile and package. Package all files to generate the dist folder.

Updating the plugin’s background.js and content.js via vue-cli3 simply does not update the plugin’s background.js and content.js because the code has already been loaded into the browser, and the browser does not listen for changes to these files. ** CrX-HotreLoad ** is perfect for real-time refresh without manual reloading. The code is also easy to use, so here we just copy the code directly to SRC /utils/hot-reload.js:

// https://github.com/xpl/crx-hotreload/edit/master/hot-reload.js const filesInDirectory = dir => new Promise(resolve =>  dir.createReader().readEntries(entries => Promise.all(entries.filter(e => e.name[0] ! == '.').map(e => e.isDirectory ? filesInDirectory(e) : new Promise(resolve => e.file(resolve)) )) .then(files => [].concat(... files)) .then(resolve) ) ) const timestampForFilesInDirectory = dir => filesInDirectory(dir).then(files => files.map(f => f.name + f.lastModifiedDate).join()) const reload = () => { window.chrome.tabs.query({ active: true, currentWindow: true }, tabs => { // NB: see https://github.com/xpl/crx-hotreload/issues/5 if (tabs[0]) { window.chrome.tabs.reload(tabs[0].id) } window.chrome.runtime.reload() }) } const watchChanges = (dir, lastTimestamp) => { timestampForFilesInDirectory(dir).then(timestamp => { if (! lastTimestamp || (lastTimestamp === timestamp)) { setTimeout(() => watchChanges(dir, timestamp), 1000) // retry after 1s } else { reload() } }) } window.chrome.management.getSelf(self => { if (self.installType === 'development') { window.chrome.runtime.getPackageDirectoryEntry(dir => watchChanges(dir)) } })Copy the code

Then process the hot flush code in vue.config.js and copy it to assets if you are in a development environment:

// vue.config.js
const plugins = [

  CopyWebpackPlugin([

    manifest

  ])

]
Copy the code

// The development environment copies the hot load files to the dist folder

if (process.env.NODE_ENV ! == 'production') { plugins.push( CopyWebpackPlugin([{ from: path.resolve("src/utils/hot-reload.js"), to: path.resolve("dist") }]) ) }Copy the code

Development of 5.

The Google Explorer plugin doesn’t have a strict project structure, just manifest.json, and doesn’t require a dedicated development environment or editor, just common front-end development tools. Click on the Top right corner of Google Chrome menu -> More Tools -> Extensions to go to the Extension Management page, open developer mode, then load your packed file, you can load your plug-in