chrome扩展(插件)开发（二）项目目录和清单配置

最新推荐文章于 2024-05-09 14:33:34 发布
最新推荐文章于 2024-05-09 14:33:34 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： chrome插件开发 文章标签： chrome devtools google chrome 前端 js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joy1793/article/details/108972843
版权

有了chrome扩展基本结构知识，就可以开始写代码了。代码的书写又牵扯到下一个问题，那就是项目结构

项目结构

在这里插入图片描述
在这里插入图片描述
整体目录和普通的前端web项目是一样的，每个人有每个人的写法，只要能让chrome读取到manifest.json配置文件即可。

manifest.json配置文件如下

{
	"manifest_version": 2,
	"name": "Chrome插件demo",
	"version": "1.0",
	"description": "最简单的Chrome插件demo，需要快速做一个简单的插件时可以基于这个仓库开发",
	"author": "mentals@foxmail.com",
	"icons":
	{
		"16": "icon.png",
		"48": "icon.png",
		"128": "icon.png"
	},
	"browser_action": 
	{
		"default_icon": "icon.png",
		"default_popup": "popup.html"
	},
	"content_scripts": 
	[
		{
      "matches": [
        "*://lmk.xxxxx.com/*",
        "*://www.xxxxx.com/*"
      ],
      "js": [
        "js/zepto.min.js",
        "js/content_script/login.js"
      ],
      "run_at": "document_idle"
    },
    {
      "matches": [
        "*://lmk.xxxxx.com/default.html"
      ],
      "js": [
        "js/content_script/jump.js"
      ],
      "run_at": "document_idle"
    },
    {
      "matches": [
        "*://lmk.xxxxx.com/makeCard/cardManage.html"
      ],
      "js": [
        "js/zepto.min.js",
        "js/content_script/inject.js"
      ],
      "run_at": "document_idle"
    },
    {
      "matches": [
        "*://lmk.xxxxx.com/makeCard/setCount.html?*"
      ],
      "js": [
        "js/zepto.min.js",
        "js/content_script/rechargeHandler.js"
      ],
      "run_at": "document_idle"
    }
	],
  "background": {
    "page": "app/background.html",
    "persistent": true
  },
  "permissions": [
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "*://lmk.xxxxx.com/*",
    "notifications",
    "storage"
  ],
  "web_accessible_resources": [
    "js/*"
  ]
}
icons

其中48指向的图片用于扩展程序管理器列表里面的图标
在这里插入图片描述
根据资料显示
16的图片指向infobar图标。（没找到）
128的图片指向的是应用程序显示的图标。（待验证）
在这里插入图片描述

browser_action

chrome浏览器地址栏显示的图标和popup html页面的指向

content_scripts

需要注入js的页面列表

{
      "matches": [ //被注入的页面
        "*://lmk.xxxxx.com/*",
        "*://www.xxxxx.com/*"
      ],
      "js": [ // 注入的js
        "js/zepto.min.js",
        "js/content_script/login.js"
      ],
      "run_at": "document_idle" // 注入js的时机 (dom准备好了再注入)
    }
background

有三种属性
如果指定了script 则Chrome会在扩展启动时自动创建一个包含所有指定脚本的页面
如果指定了page属性，则Chrome会将指定的HTML文件作为后台页面运行
persistent属性默认为true，当其值为true时，表示扩展将一直在后台运行，无论其是否正在工作；当其值为false时，表示扩展在后台按需运行，这就是Chrome后来提出的Event Page。Event Page可以有效减小扩展对内存的消耗，如非必要，请将persistent设置为false。persistent的默认值为true。

permissions

permissions属性不是manifest.json配置文件的必须属性，但是它是开发插件时必须用到的属性，因为开发插件总得要点 API 权限，其我用到的属性如下

  • “tabs”, 访问浏览器选项卡的权限
  • “webRequest”， 监听当前页面ajax请求的权限
  • “http://lmk.xxxxx.com/*”, AJAX访问http://lmk.xxxxx.com/*的权限
  • “notifications”, 浏览器通知（基于HTML5的通知实现），mac系统通知到屏幕右上角，window系统通知到系统右下角
  • “storage”, 存储,希望存储一些设置的话，就需要用到
web_accessible_resources

浏览器网页能真正访问的js，或者是能被扩展以dom操作的方式真正加载到网页的js，它的作用域和window和原浏览器网页里面的js一样。

附上一份大佬整理的 manifest.json 参数解析

{
	// Required
	"manifest_version": 2,						// manifest编写规范版本，目前主流2
	"name": "My Extension",						// 插件名
	"version": "versionString",					// 版本号
 
	// Recommended
	"default_locale": "en",						// 默认编码
	"description": "A plain text description", 	// 插件描述
	"icons": {									// 插件下载或浏览时显示的图标，可选多种规格，建议128
		"16": "icon16.png",
		"48": "icon48.png",
		"128": "icon128.png"
	},
 
	// Pick one (or none)
	"browser_action": {},						// 图标显示在地址栏右边，能在所有页面显示
	"page_action": {},							// 图标显示在地址栏右侧（地址栏内），只在特定页面显示
 
	// Optional
	"author": "",								// 插件作者
	"automation": true,							// 开启自动化
	"background": {								// 可常驻浏览器后台的脚本，可以连接其他页面
		// Recommended
		"persistent": false,
		"script": ["background.js"]
	},
	"background_page": ,
	"chrome_settings_overrides": {},			// 覆盖当前的chrome配置
	"chrome_ui_overrides": {					// 覆盖当前的chrome界面配置
		"bookmarks_ui": {
		"remove_bookmark_shortcut": true,
		"remove_button": true
		}
	},
	"chrome_url_overrides": {					// 修改点击相应动作时返回的页面链接，只支持bookmarks、history、newtab三个页面
		"bookmarks": "myPage.html",
		"history": "myPage.html",
		"newtab": "myPage.html"
	},
	"commands": {								// 键盘触发插件快捷键
		"_execute_browser_action": {
			"suggested_key": {
				"windows": "Ctrl+Shift+Y",
				"mac": "Command+Shift+Y",
				"chromeos": "Ctrl+Shift+U",
				"linux": "Ctrl+Shift+J"
			}
		 },
	},
	"content_capabilities": {												// 页面权限
		"matches": ["https://*.nyc.corp.google.com/*"],
		"permissions": ["unlimitedStorage", "notifications"] 
	},
	"content_scripts": [{													// 可以操作页面元素，不能使用chrome的api
		"matches": ["http://www.google.com/*"],
		"css": ["mystyles.css"],
		"js": ["jquery.js", "myscript.js"]
	}],
	"content_security_policy": "script-src 'self'; object-src 'self'",		// 安全策略，默认情况下禁止使用eval或者Function构造函数，以及内联js，禁止载入外部脚本
	"converted_from_user_script": true,										// 将用户脚本转化为content script，允许使用GM_* (greasemonkey)方法
	"copresence": ,
	"current_locale": ,
	"devtools_page": "devtools.html",										// 在开发中工具中的页面
	"event_rules": [{														// 事件监听规则及条件
		"event": "declarativeContent.onPageChanged",
		"actions": [{
			"type": "declarativeContent.ShowPageAction"
		}],
		"conditions": [{
			"type": "declarativeContent.PageStateMatcher",
			"css": ["video"]
		}]
	}],
	"externally_connectable": {												// 哪些外部扩展、应用或网页能连接此插件
		"ids": [
			"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
			"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
			"*"																// 允许所有可使用 "*"
		],
		"matches": ["*://*.example.com/*"],
		"accepts_tls_channel_id": false
	},
	"file_browser_handlers": [{												// 允许用户上传文件，只支持Chrome OS
		"id": "upload",
		"default_title": "Save to Gallery", 								// 按钮文字
		"file_filters": [
			"filesystem:*.jpg", 											// 匹配所有文件可用 "filesystem:*.*"
			"filesystem:*.jpeg",
			"filesystem:*.png"
		]
	}],
	"file_system_provider_capabilities": {									// 允许访问文件系统，只支持Chrome OS
		"configurable": true,
		"multiple_mounts": true,
		"source": "network"
	},
	"homepage_url": "http://path/to/homepage",								// 插件主页，显示在chrome扩展工具列表中
	"export": {																// 允许其他组件调用自己的模块
		"whitelist": [
			"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
			"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
		]
	},
	"import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],					// 调用其他组件的模块，与其他组件的export属性共用
	"incognito": "spanning or split or not_allowed",						// 隐身模式
	"input_components": [													// 输入管理，键盘事件等
		{
			"name": "Test IME",
			"type": "ime",
			"id": "test",
			"description": "Test IME",										// A user visible description
			"language": "en-US",											// The primary language this IME is used for
			"layouts": ["us::eng"]											// The supported keyboard layouts for this IME
		}
	],
	"key": "publicKey",														// 自动生成，可不需要
	"minimum_chrome_version": "versionString",								// 要求支持的chrome的最低版本
	"nacl_modules": [{														// 使用native client 模块
		"path": "OpenOfficeViewer.nmf",
		"mime_type": "application/vnd.oasis.opendocument.spreadsheet"
	}],
	"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": ,															// 可以将部分基于平台的功能文件放入_platform_specific目录然后列在此项中减少插件体积
	"plugins": [{ "path": "extension_plugin.dll" }],						// NPAPI插件
	"requirements": {														// 安装前置需求
		"3D": {
			"features": ["webgl"]
		}
	},
	"sandbox": [															// 放入沙盒中运行
		{
			"pages": [
				"page1.html",
				"directory/page2.html"
			],
			// content_security_policy is optional.
			"content_security_policy": "sandbox allow-scripts; script-src https://www.google.com"
		}
	],
	"short_name": "Short Name",												// 短名称，最长12个字母，如不设置则用name属性代替
	"signature": ,
	"spellcheck": ,															// 拼写检查
	"storage": {															// 描述了各种属性的type，json格式文件，能在storage.managed API中调用
		"managed_schema": "schema.json"
	},
	"system_indicator": ,													// 实验性API，只在开发版中实现，已弃用
	"tts_engine": {															// text to speech
		"voices": [
			{
				"voice_name": "Alice",
				"lang": "en-US",
				"gender": "female",
				"event_types": ["start", "marker", "end"]
			},
			{
				"voice_name": "Pat",
				"lang": "en-US",
				"event_types": ["end"]
			}
		]
	},														
	"update_url": "http://myhost.com/mytestextension/updates.xml",			// 插件更新地址
	"version_name": "aString",												// 版本名，和version字段的区别是没有格式要求，任意字符串
	"web_accessible_resources": ["images/*.png"]							// 指定本扩展在注入的目标页面上所需使用的资源的路径
}

大佬文章链接 https://blog.csdn.net/sysuzjz/article/details/51648163

缘_妙不可言
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【chorme插件开发】第二节：插件的配置文件说明及素材
任聪聪的博客
12-20 374
manifest文件配置详情 name ：插件名称 version ：版本号 mainfest_version ：指定清单文件格式版本 必填 description ：插件描述 browser_action ：设置扩展信息栏的图标，点击后可以看到图标的悬浮菜单 { default_icon:浏览器工具栏中显示的默认图标 default_popup:点击工具栏图标弹出的窗口 default_tit...
chrome的配置文件
12-27
主要用于解决跨域问题，而且非常好用。覆盖到C盘可以方便跨域。
Chrome插件开发一（配置文件）
a2256684的博客
01-10 434
配置文件manifest.json (0)每个插件都必须要有name和version name不超过45个字符 version介于0到65535之间，description不超过132个字符 （1）"chrome_url_overrides": { "newtab": "newtab.html" }, 新建Tab时的默认页面，用newtab.htm...
【教程向】从零开始创建浏览器插件（二）深入理解 Chrome 扩展的 manifest.json 配置文件
最新发布
九日的博客
05-09 945
在本篇博客中，我们将更详细地探讨 Chrome 扩展中的文件。这个文件是每个浏览器扩展不可或缺的核心，它不仅定义了扩展的基本元数据，而且还规定了扩展的行为和权限。我们将深入探讨各种常用配置，并提供具体的代码示例以帮助您更好地理解和运用这些配置。
chrome插件目录位置
kirakingdx的专栏
12-20 351
Windows：  C:\Users\xxx\AppData\Local\Google\Chrome\User Data\Default\Extensions   Mac: /Users/xxx/Library/Application Support/Google/Chrome/Default/Extensions   xxx替换为用户名
查看chrome浏览器的配置文件与插件
热门推荐
馨若梦的博客
08-28 1万+
一、查看chrome浏览器的配置文件 1、打开chrome浏览器，在输入地址栏中输入chrome://version/，回车，会显示所有的信息，个人资料路径就是配置文件的地址 可以复制个人资料路径到本机的路径中，可以查看到具体的文件名称 二、查看chrome浏览器的插件    1、打开chrome浏览器，输入chrome://extensions/，回车，显示chrome已安装的插...
CHROME扩展开发文档之·清单 - Web 可访问资源
slongzhang的博客
03-10 2004
清单 - Web 可访问资源发表于2013 年 5 月 12 日，星期日 •更新日期2018 年 5 月 14 日，星期一目录清单声明资源的可导航性例子Web 可访问资源是扩展内的文件，可以通过网页或其他扩展访问。扩展通常使用此功能来公开需要在网页中加载的图像或其他资产，但扩展包中包含的任何资产都可以通过网络访问。默认情况下，没有任何资源可通过 Web 访问；只有从扩展源加载的页面或脚本才能访问该扩展的资源。扩展作者可以使用web_accessible_resourcesmanifest 属性来声明哪些资源
Free Download Manager(FDM) v3.0.57 Chrome扩展插件
09-08
总的来说，FDM v3.0.57 Chrome扩展插件是提升下载效率和管理下载任务的理想工具，其功能强大，操作简便，特别适合频繁下载大文件或需要管理多个下载任务的用户。结合提供的文件清单，用户不仅可以安装和使用FDM，还...
基于Python开发chrome插件的方法分析
12-24
在开发Chrome插件时，通常我们使用HTML、JavaScript和CSS来构建扩展的功能。然而，有时候开发者可能希望利用Python的强大功能。本文将介绍一种方法，即使用Python替代JavaScript来开发Chrome插件，主要依赖于Brython...
Chrome插件开发完整demo
08-13
这个"Chrome插件开发完整demo"提供了一个完整的实例，帮助开发者深入理解如何构建自己的Chrome扩展。下面，我们将详细探讨Chrome插件开发的相关知识点。 1. **Chrome插件架构** Chrome插件由几个关键组件组成：`...
chrome-extension-v3-starter:使用清单v3的最小Chrome扩展模板
05-13
该存储库包含一个最小的Chrome / Chromium扩展程序，该扩展程序使用清单（v3）的最新版本。 您可以将其用作开发扩展的基础。 它还可以为您提供有关如何将v2扩展名转换为v3的更多见解。 换句话说，这是一个可行的，...
umi-plugin-extensions:用于开发Chrome插件的umi适应插件
04-02
用于开发Chrome插件的umi插件。 安装 npm i -D umi-plugin-extensions 或 yarn add -D umi-plugin-extensions 使用 :bell:请确保您对Chrome插件开发已经有基本的了解，入门教程： 。 在umi配置文件cofig/config.ts...
Selenium启动Chrome时，加载用户配置文件
百毒不侵的博客
04-05 1万+
Selenium操作浏览器是不加载任何配置的，网上找了半天，关于Firefox加载配置的多点，Chrome资料很少，下面是关于加载Chrome配置的方法： 　　一、加载所有Chrome配置 　　用Chrome地址栏输入chrome://version/，查看自己的“个人资料路径”，然后在浏览器启动时，调用这个配置文件，代码如下： 　　#coding=utf-8 　　from seleniu...
【Chrome浏览器插件开发】浏览器插件运行机制02之实战开发出一款Google浏览器插件——含源码全部过程 (建议在Linux环境下）
量化Mike
04-27 1189
一、浏览器插件配置文件 manifest.json入门 每个浏览器插件都有一个 JSON 格式的文件，叫做 manifest.json，里面提供了插件的描述信息。 manifest.json 文件本质上是一个 json 文件，json 中的每一项代表一种配置。其中有些字段是每个插件都要有的配置，分别是： 1.1 name name属性用于配置插件的名字 { name:"插件集" } 1.2 version 用来配置插件的版本号，通常用 1 个到 4 个数字来表示，中间用点隔开，这些数字不能以 0 开头且
Chrome浏览器插件开发v3版本第一篇：认识和创建一个demo
11-22 4033
如果怀疑此脚本是否被注入到此网站上了，可以右键打开检查：打开console控制台，可以看到，我们的脚本执行了，这就是我们的 content.js中写的输出。我的目录结构：（结构没有明确的规定，只要有manifest.json文件就可以，其他文件能通过路径找到并引入就好）content.js中的js文件：用于在匹配到matches中的网站里面注入js程序，并添加一个阅读时间的提醒。在页面上点击右键：检查， 就可以调试插件，就像调试网页一样方便。插件加载：打开开发者模式，然后加载已解压的拓展程序。
Chrome扩展插件V3版本配置项参数说明
lxm1353723767的博客
07-08 7471
Chrome扩展插件V3版本的配置项说明，和V2版相比，有部分配置参数变化，V3最大的变化是background后台背景页迁移为服务人员这一改动，改动后无法使用window和调用ducoment
Chrome插件开发、脚本开发笔记
欢迎访问我的主页：https://www.bookbook.cc
05-06 7647
文章目录一、manifest.json1.1 name 插件的名字1.2 version 插件的版本1.3 manifest_version 清单文件的版本 一、manifest.json 这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。 其中，manifest_version、name、version 3个是必不可少的，description和i...
Chrome插件 - 在书签栏创建指定文件夹
⚡
03-23 2240
在mainfest.json文件中添加新的属性(获取权限)： "permissions": [ "bookmarks" ] 获得该属性后，该插件即可使用Chrome.Bookmark的API来实现对书签的操作：chrome://bookmarks/ 在popup.html中创建一个<button id="button1">点击创建文件夹<...
chrome 扩展插件开发 复制内容到剪切板 示例
09-08
### 回答1： 在 Chrome 扩展插件中复制内容到剪切板可以使用 Clipboard API。下面是一个示例代码: ``` document.addEventListener('copy', (event) => { event.clipboardData.setData('text/plain', '复制的内容'); event.preventDefault(); }); document.execCommand('copy'); ``` 这段代码会在复制事件触发时将字符串 "复制的内容" 复制到剪切板。 注意: Clipboard API 仅在 https 和 localhost 中可用。 需要添加权限"clipboardRead" and "clipboardWrite" 在manifest.json 中加入 ``` "permissions": [ "clipboardRead", "clipboardWrite" ] ``` ### 回答2： Chrome 扩展插件开发是指开发用于增强Chrome浏览器功能的小型应用程序。复制内容到剪切板是其中一种常见需求，以下是一个示例： 在Chrome扩展插件开发中，复制内容到剪切板是一种非常常见的需求。通过插件开发，我们可以实现在浏览器中选中文本后，通过点击插件按钮或者使用快捷键，将选中的内容复制到剪切板中。 实现这个功能，我们需要使用Chrome扩展API中的 `clipboard` 权限和相应的方法。首先，在插件的manifest.json文件中声明需要使用的权限： ``` { "manifest_version": 2, "name": "复制内容到剪切板示例", "version": "1.0", "permissions": [ "clipboardWrite" ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "icons": { "16": "icon.png", "48": "icon.png", "128": "icon.png" } } ``` 接下来，在popup.html中添加一个按钮元素，并在popup.js中为按钮添加点击事件监听器： ```html <!DOCTYPE html> <html> <head> <title>复制内容到剪切板示例</title> <script src="popup.js"></script> </head> <body> <button id="copyBtn">复制选中内容</button> </body> </html> ``` ```javascript document.addEventListener('DOMContentLoaded', function() { var copyBtn = document.getElementById('copyBtn'); copyBtn.addEventListener('click', function() { chrome.tabs.executeScript( { code: "window.getSelection().toString();" }, function(selection) { var text = selection[0]; copyToClipboard(text); }); }, false); }); function copyToClipboard(text) { var textarea = document.createElement("textarea"); document.body.appendChild(textarea); textarea.value = text; textarea.select(); document.execCommand("copy"); document.body.removeChild(textarea); } ``` 以上代码通过监听按钮的点击事件，使用 `executeScript` 方法获取当前选择的文本内容，并将其传递给自定义的 `copyToClipboard` 函数。该函数在页面中动态创建一个隐藏的文本框，将文本赋值给文本框，然后通过 `execCommand("copy")` 方法将文本复制到剪切板中。 通过以上简单示例，我们可以看到如何在Chrome扩展插件开发中实现将选中内容复制到剪切板的功能。整个过程依赖于Chrome扩展API中的 `clipboard` 权限和相应的方法，开发者可以根据需求进行扩展和修改。 ### 回答3： Chrome扩展插件是一种能够增强Chrome浏览器功能的工具。开发Chrome扩展插件可根据个人需求，定制化地实现特定功能。在开发Chrome扩展插件时，复制内容到剪切板是一个常见的需求。 要实现在Chrome扩展插件中复制内容到剪切板，我们可以借助Chrome的API，如`chrome.tabs`和`chrome.extension`等。 首先，我们需要在扩展插件的`manifest.json`文件中声明使用`clipboardWrite`权限，以便能够访问剪切板的写入功能。 然后，在扩展插件的主要逻辑中，我们可以通过使用`chrome.tabs.executeScript`方法向当前活动标签页注入一个自定义的JavaScript脚本。 这个自定义的脚本可以通过`document.execCommand('copy')`来复制当前选中的内容到剪切板。使用`execCommand('copy')`命令可以模拟用户手动复制操作。 在执行完脚本后，可以通过`chrome.extension.getBackgroundPage().chrome.extension.sendMessage`方法将复制操作结果传递给扩展插件的background.js后台脚本。 在background.js中，我们可以使用`chrome.extension.onMessage`监听消息，然后将复制操作的结果存储到剪切板中。 最后，我们可以通过向用户显示一个通知或者通过其他方式提示复制操作完成。 总的来说，开发Chrome扩展插件实现复制内容到剪切板的功能，首先需要声明相应的权限，然后通过注入自定义脚本实现复制操作，再通过消息传递和后台脚本将结果存储到剪切板中。以上就是一个示例，具体的实现方式还可以根据具体需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值