Vue Chrome Extension: Build a Browser Add-on with Vue.js-JS Tutorial-php.cn

Vue Chrome Extension: Build a Browser Add-on with Vue.js

Joseph Gordon-Levitt

Release： 2025-02-14 09:54:11

Original

957 people have browsed it

This tutorial demonstrates building a simple Vue Chrome extension that modifies the new tab page. We'll use Vue.js for rapid development and enjoyable coding.

Vue Chrome Extension: Build a Browser Add-on with Vue.js

Browser extensions enhance browser functionality, performing tasks like ad blocking, password management, and tab organization. They're built using familiar web technologies (HTML, CSS, JavaScript) but access browser-specific APIs. The code for this tutorial is available on GitHub.

Key Concepts:

Leverage Vue.js for efficient Chrome extension development.
Create a basic extension with a manifest file and background script, installing it in Developer mode.
Override the New Tab page using chrome_url_overrides in the manifest file.
Integrate Vue using the vue-web-extension boilerplate for features like hot reloading.
Fetch and display dynamic content (e.g., jokes from an API) with Vue components.
Update Chrome storage to save user interactions (like favoriting jokes).
Enhance the UI with libraries like vue-awesome for icons.

Building a Basic Extension:

The core components are a manifest file (JSON) and a background script. The manifest provides extension information (version, resources, permissions), while the background script handles browser events (like new tab creation).

Let's create a "Hello, World!" extension:

Create a folder (hello-world-chrome), and files (manifest.json, background.js).
manifest.json:

{
  "name": "Hello World Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

Copy after login

background.js:

chrome.runtime.onInstalled.addListener(() => {
  alert('Hello, World!');
});

Copy after login

Install the extension: In Chrome (chrome://extensions/), enable Developer mode. Click "Load unpacked," select the hello-world-chrome folder, and click "Open." A "Hello, World!" alert should appear.

Vue Chrome Extension: Build a Browser Add-on with Vue.js

Overriding the New Tab Page:

To customize the new tab page, create tab.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My New Tab Page!</title>
</head>
<body>
  <h1>My New Tab Page!</h1>
  <p>You can put any content here you like</p>
</body>
</html>

Copy after login

Update manifest.json to include:

"chrome_url_overrides": {
  "newtab": "tab.html"
}

Copy after login

Reload the extension to see the changes.

Vue Chrome Extension: Build a Browser Add-on with Vue.js

Integrating Vue:

Use the vue-web-extension boilerplate (requires Node.js and npm):

vue init kocal/vue-web-extension new-tab-page (answer the prompts, installing axios).
cd new-tab-page
npm install
npm run watch:dev (builds to dist folder).

This boilerplate simplifies development with hot reloading and script bundling. The structure will include src/tab/App.vue where you can build your Vue component for the new tab page. Remember to adjust manifest.json and webpack.config.js as described in the original article to correctly point to your new tab page's HTML and JavaScript files. The rest of the tutorial details fetching jokes, persisting data using Chrome storage, and styling improvements using vue-awesome, all within the context of this Vue component. Finally, the process of packaging and uploading to the Chrome Web Store is described.

The above is the detailed content of Vue Chrome Extension: Build a Browser Add-on with Vue.js. For more information, please follow other related articles on the PHP Chinese website!