专业编程基础技术教程

网站首页 > 基础教程 正文

Chrome插件/扩展开发 - 插件的基本结构(2)

ccvgpt 2024-10-12 13:40:45 基础教程 8 ℃

一. Chrome 插件的组成部分

Chrome 插件的基本结构由多个文件和文件夹组成，主要包括以下几个重要部分：

Chrome插件/扩展开发 - 插件的基本结构(2)

# 一个简单的目录结构

my-extension/

├── manifest.json

├── background.js

├── content.js

├── popup.html

├── popup.js

├── icon.png

├── styles.css


1. Manifest 文件

manifest.json 是 Chrome 插件的核心配置文件，包含插件的基本信息和配置选项。

2. 后台脚本

background.js 是后台脚本，可以在浏览器后台运行，处理事件和维护插件状态。

# background.js

chrome.runtime.onInstalled.addListener(() => { console.log("Extension installed!"); });

3. 内容脚本

content.js 是注入到网页中的脚本，可以访问和修改网页的 DOM。它在特定的网页上运行，并能够与后台脚本进行通信。

# content.js 设置chrometab页背景颜色

document.body.style.backgroundColor = "lightblue";

4. 用户界面

弹出窗口: popup.html 是用户点击插件图标时显示的页面，通常包含插件的用户界面。

图标: 插件的图标通常放在项目根目录中，格式可以是 PNG 或 SVG。

# popup.html 一个简单的hello world 页面， popup.js 是用来使用逻辑操作

<!DOCTYPE html>

<html>

<head>

<title>My Popup</title>

<style>

body { width: 200px; }

</style>

</head>

<body>

<h1>Hello, World!</h1>

<script src="popup.js"></script>

</body>

</html>

5. 其他文件

  • 样式文件: 如果需要，可以包括 CSS 文件来美化用户界面。
  • 库文件: 如果插件需要使用外部库，可以将其包含在项目中。（后面实际案例中会用到第三方库）

二、Chrome插件核心配置文件 manifest.json 文件详解

manifest.json 是 Chrome 插件的核心配置文件，包含插件的基本信息和配置选项。主要字段包括：

  • manifest_version: 清单文件的版本。
  • name: 插件的名称。
  • version: 插件的版本号。
  • description: 插件的简短描述。
  • permissions: 插件所需的权限，例如访问标签页、书签等。
  • background: 定义后台脚本，通常用于处理事件。
  • content_scripts: 定义要注入到特定网页的内容脚本。
  • action: 定义插件图标和弹出窗口。

# manifest.json 样例配置问题

{

"manifest_version": 3,

"name": "My Chrome Extension",

"version": "1.0",

"description": "A simple Chrome extension.",

"permissions": ["tabs"],

"background": { "service_worker": "background.js" },

"content_scripts": [ { "matches": ["https://*.example.com/*"], "js": ["content.js"] } ],

"action": { "default_popup": "popup.html", "default_icon": "icon.png" }

}


Tags：

猜你喜欢

最近发表
标签列表