【Chrome浏览器插件开发】浏览器插件运行机制02之实战开发出一款Google浏览器插件——含源码全部过程 (建议在Linux环境下）

最新推荐文章于 2024-07-31 10:22:31 发布

量化Mike

最新推荐文章于 2024-07-31 10:22:31 发布

阅读量1.2k

点赞数 2

分类专栏： Python Web开发文章标签：谷歌 chrome 浏览器插件 vue manifest

本文链接：https://blog.csdn.net/weixin_43529465/article/details/124454102

版权

Python Web开发专栏收录该内容

36 篇文章 4 订阅

订阅专栏

一、浏览器插件配置文件 manifest.json入门

每个浏览器插件都有一个 JSON 格式的文件，叫做 manifest.json，里面提供了插件的描述信息。
manifest.json 文件本质上是一个 json 文件，json 中的每一项代表一种配置。其中有些字段是每个插件都要有的配置，分别是：

1.1 name

name属性用于配置插件的名字

{
	name:"插件集"
}

1.2 version

用来配置插件的版本号，通常用 1 个到 4 个数字来表示，中间用点隔开，这些数字不能以 0 开头且必须在 0 到 65535 之间。

"version": "1.1"
"version": "3.0"
"version": "4.10.1"

version 字段也是版本自动更新的依据，浏览器会自动比较已经安装的插件版本和线上版本是否一样，如何线上版本高于已安装版本，插件将会从 update_url 配置的地址中重新拉取最新代码，从而达到自动更新的目的。

1.3 manifest_version

用整数表示 manifest 文件自身格式的版本号，从 Chrome 18 后必须指定版本号为 2。

{
  "manifest_version": 2
}

1.4 description

用于对插件的描述,不能超过 132 个字符

{
  description: "用于插件描述";
}

1.5 icons

配置插件的图标，支持 16×16、48×48、128×128 三种尺寸，格式最好是 png。

{
    "icons":{
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    }
}

二、创建Manifest文件

文件夹目录
在这里插入图片描述

2.1 创建 Manifest.json文件

{
    "name": "demo",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "is demo", 
    "icons": {
      "48": "./logo.png" 
    },
    "browser_action": {
        "default_popup": "index.html"
    }
}

2.2 插件浏览页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    demo
  </body>
</html>