Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

preface

Google Plug-in is a plug-in developed using HTML, JS, CSS and other front-end technologies to enhance browser functions. Programmers may use plug-ins such as HackBar and vue.js DevTools daily. Google plugins make it easy to create your own “custom” web pages and “custom” browsers.

During the Qingming Festival holiday, I spent a day at home during the epidemic. Based on Vue3.x + TS, I developed a Google plug-in for nuggets of gold with one click and three links, which can like, collect and follow the author of nuggets of gold articles with one click. The source address of the plugin is here

In this article, you’ll learn how to develop a Google plugin page using Vue 3.x+ TS (just like normal business development) and learn a few things about Google plugin development.

start

Let’s take a look at the interaction:

The following interactive function points are sorted out:

  1. Click on the plug-in icon to control the collapse or expansion of the sidebar;
  2. The switch button in the sidebar controls whether plug-ins are enabled or not;
  3. Users can choose to trigger three behaviors of “like”, “favorites” and “follow” according to their preferences (by default, “like” can not be cancelled).
  4. When the plug-in is enabled, enter the gold digging article for “like”, you can achieve the effect of one button three.
  5. The data state of the plug-in is saved and the page is refreshed without loss

Once the functionality is clear, we can start designing

Json. In this directory, we can configure background.js to listen for users to click on the plug-in icon, listen for users to create tabs, etc. Background. js will always run in the background.

Content.js can share the DOM with the web page and manipulate the DOM, but does not share the JS of the web page. We can implement sidebar development by injecting iframe into the page.

starts

After sorting out the function points and designing the scheme, we can start coding. The structure of the project is as follows:

The sidebar content is a form, which is pretty simple, but I use the main stack of vue3.x+vite2.x+NaiveUI.

I will communicate the value change message to the other parts through the watch form

The main logic of the sidebar is as follows:

export const useAppOn = () = > {
  const isAppOn = ref(false)

  watch(isAppOn, newVal= > {
    const params = {
      from: iframePart,
      to: backgroundPart,
      key: appOnKey,
      value: newVal
    }
    chrome.runtime?.sendMessage(chrome.runtime.id, params)

    window.parent? .postMessage({from: iframePart,
      to: injectPart,
      key: appOnKey,
      value: newVal,
    }, The '*') chrome.storage? .local.set({ [appOnKey]: newVal }) }) chrome.storage? .local.get([appOnKey],res= > {
    if(res[appOnKey]) { isAppOn.value = !! res[appOnKey] } })return {
    isAppOn,
  }
}
Copy the code

The background-js listening logic is as follows:

chrome.runtime.onMessage.addListener(({ from, to, key, value }) = > {
  if (from === iframePart && to === backgroundPart && key === appOnKey) {
    if (value === true) {
      // balabala
    } else {
      // yy}}})Copy the code

The listening logic of injection-page.js is as follows:

window.addEventListener('message'.({ data: { from, to, key, value, initData } }) = > {
    if (from === contentPart && to === injectPart && initData) {

      // Initialize the data
    } else if (from === iframePart && to === injectPart && key === appOnKey) {

      // Start or stop the plug-in
    } else if (from === iframePart && to === injectPart && key === checkItemsKey) {
      / /...}},false)
Copy the code

The data communication of each part of the summary is by chrome. Runtime. SendMessage or window. The parent. PostMessage implementation,

After the injected JS can get the data, it can conduct one-key three-link behavior simulation according to the form data

const $agreeBtn = document.querySelector('.article-suspended-panel .panel-btn') $agreeBtn? .addEventListener('click'.() = > {
    if ($agreeBtn.className.includes('active') | |! pageConfig.isAppOn) {// Cancel the likes and don't go down
      // Do not go down until the plugin is enabled
      return
    }

    if (pageConfig.formData.follow) {
      follow()
    }
    / /...
  })
  
  function follow() {
    const $followBtn = document.querySelector<HTMLElement>('.article-area .follow-button')
    if(! $followBtn.className.includes('followed')) {
      $followBtn.click()
    }
  }
Copy the code

When the code is written and packaged, compile the TS to JS and copy the icon, manifest.json, to the dist directory

import { exec } from 'child_process'

function main() {
  exec('tsup')
  exec('cp -r chrome/icons dist')
  exec('cp -r chrome/manifest.json dist')
}

main()
Copy the code

Problems encountered in the development process and points to pay attention to

  1. After updating the code, repackaging is required inchrome://extensions/Click the refresh button.

  1. After the plug-in is installed or updated, you need to refresh the web page so that you can re-inject the latest JS.

  2. Window. postMessage will fail to send object data, instead passing json strings

  3. I am currently using Manifest Version 2, but v2 is no longer recommended and will be deprecated in 2023. If you use V3, you can see this migration guide

  4. The data communication of each part of the plug-in will be troublesome and easy to get confused. We can judge by passing from, to and key values to avoid confusion.

  5. Injection-page. js and iframe should be injected after the page is loaded. Otherwise, dom information such as the like button cannot be obtained if injected at the beginning

A link to the

  • The Nuggets hit three buttons in a row
  • Plug-in learning Materials

The Google Plugin is a tool that, when used properly, can help us customize features, save time and improve efficiency. There are a lot of things not covered in this article about Google plugins, this article is just a point to start with, if you read this article and feel that you have learned something, please give the author a small thumbs-up!! One key three even, this time certain!!