Use Vue scaffolding to develop chrome plugins, too convenient!

preface

Json file, manifest.json attributes

Content_scripts Specifies the injected js, CSS.
Browser_action default_popup specifies the path to the popup HTML file.
Background Resident page 【 BACKGROUND 】

The user performs popup page operation, inject DOM analysis, and communicates with background to send data to background summary. This communication is very troublesome.

Vue development Chrome plugin advantages

Avoid complex communications

Native file development plug-in, need to use

Chrome. Runtime. SendMessage ({action: the action START_FETCH, data: XXXX}) to transmit data, just one or two or can be, but often we have to do the plugin is not so simple. Vue can solve this problem without the need for cumbersome communication.

▍ DOM manipulation

Developing plug-ins is not without user interaction. Native DOM manipulation, document.getelementByid (), is cumbersome, and Vue’s bidirectional binding perfectly eliminates this problem.

▎ packaging

Vue and Webpack are easy to pack in real time

Vue initializes the project

The prerequisite is that you have installed the scaffolding environment, which is not demonstrated here

vue create hello-chrome-vue
Copy the code

The vue2.0 syntax is selected by default

Please pick a preset: Default ([Vue 2] babel, Eslint) ✨ Creating project in E:\dev_workspace\ webStorm_workspace \hello-chrome-vue. 🗃 Initializing Git Repository... ⚙️ Installing CLI plugins. This might take a while... > [email protected] install E:\dev_workspace\webstorm_workspace\hello-chrome-vue\node_modules\yorkie > node bin/install.js Setting up Git hooks done > [email protected] postinstall E:\dev_workspace\webstorm_workspace\hello-chrome-vue\node_modules\core-js > node -e "Try {the require ('/postinstall ')} the catch (e) {}" > [email protected] postinstall E:\dev_workspace\webstorm_workspace\hello-chrome-vue\node_modules\ejs > node ./postinstall.js added 1264 packages from 656 ficolin-in 52.131s 84 packages are looking for funding run 'NPM fund' for details 🚀 Invoking generators... 📦 Installing additional dependencies... Added 53 packages from 36 ficolin-3 in 19.491s 89 packages are looking for funding run 'NPM fund' for details ⚓ Running completion hooks... 📄 Generating README. Md... 🎉 Successfully created project hello-chrome-vue. 👉 Get started with the following commands: $ cd hello-chrome-vue $ npm run serve WARN Skipped git commit due to missing username and email in git config, or failed to sign commit. You will need to perform the initial commit yourself.Copy the code

Successfully indicates that the installation is successful

Delete unnecessary files

Since we are not doing a complete Web project, vuE-CLI3 scaffolding generates files that we do not all need, so here we remove unnecessary parts

src/main.js

src/components

SRC/app.vue (optional)

Install chrome-Ext plugin dependencies

We need to modify the project so that it is suitable for developing Chrome extensions. You can only install it using vue add chrome-ext. If you use YARN add chrome-ext, you will find that the project has not changed.

After installation, package.json is configured as follows

Chrome -ext dependency installation corresponds to vue-cli-plugin-chrome-ext, the entire project directory is as follows:

Vue.config. js automatically generates the configuration, and backgroud.js was configured after me

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

// Generate pages object
const pagesObj = {};

const chromeName = ["popup", "options"];

chromeName.forEach(name => {
  pagesObj[name] = {
    entry: `src/${name}/index.js`,
    template: "public/index.html",
    filename: `${name}.html`
  };
});
const background = {
    from: path.resolve("src/background.js"),
    to: `${path.resolve("dist")}/background.js`
}
const plugins =
  process.env.NODE_ENV === "production"
    ? [
          {
              from: path.resolve("src/manifest.production.json"),
              to: `${path.resolve("dist")}/manifest.json`
          },
          {
              ...background
          }
      ]
    : [
        {
          from: path.resolve("src/manifest.development.json"),
          to: `${path.resolve("dist")}/manifest.json`
        },
          {
              ...background
          }
      ];

module.exports = {
  pages: pagesObj,
  configureWebpack: {
    plugins: [CopyWebpackPlugin(plugins)]
  }
};
Copy the code

Package. json configures running scripts

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint",
    "build-watch": "vue-cli-service build-watch"
  },
Copy the code

The plug-in USES

NPM Run build generates dist, which can be installed directly into Google Browser

The directory structure in PopUp is automatically generated by installing the Chrome-Ext plugin

The content in app.vue is my own arbitrary definition

</button> <input type="text" </button> <input type="text" v-model="value"> </div> </template> <script> import chrome from "vue-cli-plugin-chrome-ext"; export default { name: 'app', data(){ return{ listenerId: null, value:'', } }, mounted() { let that = this; this.$nextTick(()=>{ // When the button is clicked, inject setPageBackgroundColor into current page that.listenerId = that.$refs.changeColor.addEventListener("click", async () => { let [tab] = await chrome.tabs.query({active: true, currentWindow: true}); chrome.scripting.executeScript({ target: {tabId: tab.id}, function: that.setPageBackgroundColor, }); }); }) }, destroyed() { this.listenerId && window.removeEventListener(this.listenerId); }, methods: { handleClick() { this.value = new Date().getMilliseconds(); chrome.storage.sync.get("color", ({color}) => { this.$refs.changeColor.style.backgroundColor = color; }); }, setPageBackgroundColor() { console.log('setPageBackgroundColor---'); chrome.storage.sync.get("color", ({color}) => { document.body.style.backgroundColor = color; }); } } } </script> <style> button { height: 50px; width: 50px; outline: none; margin: 10px; border: none; border-radius: 2px; } button.current { box-shadow: 0 0 0 2px white, 0 0 0 4px black; } </style>Copy the code

This uses the relevant Chrome API to add “@type/chrome” to the Chrome type declaration

npm install --save-d @types/chrome
Copy the code

Remember to turn off ESLint syntax checking for easy development

Copy the code

During debugging, if you want to print the logs in the plugin, you need to right click on the plugin icon and click on the audit element separately. Otherwise, you cannot capture the logs by pressing the F12 browser directly

The last

After the project follows the above process, the future page can be completely developed in the way of Vue, introducing some good UI, it is indeed much faster than directly writing JS and jquery.js

Click the card below/wechat search, follow the public account “Tianyu Creative Music” (ID: GH_CC865e4C536b)

I heard that praise and attention to this number have found a beautiful little sister yo and after the year will enter a million ah!!

Phase to recommend

[

Urgent!!! Log4j epic vulnerability attack, please check yourself!