How to use Google plugins to inject code into a website

When browsing websites, we often write scripts and plugins to extend their functionality due to limitations of the websites. There are two common methods: Tampermonkey and Google Plugins. Tampermonkey is also a plugin and is easy to use. Today, we will discuss how to inject code into websites using Google Plugins.

Generate the following files according to the structure:

|chrome-plugin
|---manifest.json
|---script.js
|---favicon.ico

Write the code in manifest.json, which is an entry file that declares the basic information of the plugin.

default_icon is the icon of the plugin.
matches specifies the websites where the plugin will take effect. Make sure to add /* at the end.
js specifies the files to be imported.

// manifest.json

{
  "name": "Welcome",
  "manifest_version": 2,
  "version": "1.0",
  "description": "Extension Plugin",
  "browser_action": {
    "default_icon": "favicon.ico"
  },
  "content_scripts": [
    {
      "matches": ["https://github.com/*"],
      "js": ["script.js"]
    }
  ]
}

Then, simply insert a piece of code in script.js.

// script.js

console.log('hello, world!')

Now, the basic plugin is complete. The next step is to upload it. However, if you package and generate a crx file, uploading the crx file will result in an error and a warning because it has not been published on the Chrome Web Store. Therefore, we can skip the packaging step and directly load the local files.

Then, select the folder where the files are located.

Click "OK" to upload. This completes the process of uploading a plugin. We can learn related technologies and write the functions we need. This is one of the reasons why Chrome browser is so popular, as it integrates a large number of plugins.

If you want to sell or share your plugin for free in the Chrome Web Store, you need to register as a developer. After paying a $5 fee, you can start uploading. Once it passes the review, your plugin will be visible in the store listing.