您现在的位置是：首页 > 网络工具 > 正文

网络工具

如何开发了一个chrome浏览器插件？

1987web2023-10-21网络工具147

视频教程

自动化操作系列视频课程toolchest.cn/static/mv3.html

1.课程目标

了解manifest.json的基本结构，熟悉manifest.json中重要字段的含义及配置方法

2.课程内容

2.1manifest.json介绍

每个扩展都有一个名为manifest.json的 JSON 格式清单文件。清单文件是扩展的蓝图。清单文件包括如下信息：

扩展的版本号。
扩展的标题。
扩展运行所需的权限。

{
  // 必须的
  "manifest_version": 3,
  "name": "My V3 Extension",
  "version": "versionString",

  // 推荐的
  //***点击插件图标时的相应处理信息
  "action": {...},
  "default_locale": "en",
  "description": "A plain-text description",
  "icons": {...},

  // 可选
  "action": ...,
  "author": ...,
  "automation": ...,
  //***后台处理代码，主要的逻辑处理服务
  "background": {
    // If `background` is included, `service_ worker` is required
  "service_worker": ...
},
  "chrome_settings_overrides": {...},
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  //***向页面中注入脚本
  "content_scripts": [{...}],
  "content_security_policy": "policyString",
  "converted_from_user_script": ...,
  "current_locale": ...,
  "declarative_net_request": ...,
  "devtools_page": "devtools.html",
  "differential_fingerprint": ...,
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.contoso.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "http://path/to/homepage",
  //***允许操作的URL
  "host_permissions": [...],
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "natively_connectable": ...,
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  //***权限声明
  "permissions": ["tabs"],
  "platforms": ...,
  "replacement_web_app": ...,
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "version_name": "aString",
  //***可访问的资源
  "web_accessible_resources": [...]
}

2.2案例中的mainfest.json

2.2.1插件的基本信息

{
  //插件名称
    "name": "picshow",
  //插件版本
    "version": "0.0.0.1",
  //manifest版本，从今年开始弃用2版本
    "manifest_version": 3,
  //插件描述
    "description": "在页面顶部显示特定图片"
}

2.2.2图标信息

图标用于用户选择启动扩展的按钮的背景图像。

对于图标：

建议使用PNG格式，但也可以使用 BMP、 GIFICO 或 JPEG 格式。
建议使用 128 x 128 像素的图像，如有必要，这些图像由浏览器调整大小。

{
  "name": "picshow",
  "version": "0.0.0.1",
  "manifest_version": 3,
  "description": "在页面顶部显示特定图片",
  "icons": {
    "16": "icons/logo16x16.png",
    "32": "icons/logo32x32.png",
    "48": "icons/logo48x48.png",
    "128": "icons/logo128x128.png"
  }
}

2.2.3点击图标弹出页面

当用户选择图标以启动扩展时， popup/popup.html 将显示为模式对话框。

{
    "name": "picshow",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "在页面顶部显示特定图片",
    "icons": {
      "16": "icons/logo16x16.png",
      "32": "icons/logo32x32.png",
      "48": "icons/logo48x48.png",
      "128": "icons/logo128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
            ""
            ],
            "js": ["lib/jquery.min.js","content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["images/*.jpeg"],
            "matches": [""]
        }
    ]
}