1 Star 0 Fork 0

max-lu / max-chrome-extension

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

chrome插件开发

manifest.json

manifest.json文件各个参数的说明

  • 提供类型划分
{
// 必须的字段
  "name": "My Extension",
  "version": "versionString",
  "manifest_version": 2,
  // 建议提供的字段
  "description": "A plain text description",
  "icons": { ... },
  "default_locale": "en",
  // 多选一,或者都不提供
  "browser_action": {...},
  "page_action": {...},
  "theme": {...},
  "app": {...},
  // 根据需要提供
  "background": {...},
  "chrome_url_overrides": {...},
  "content_scripts": [...],
  "content_security_policy": "policyString",
  "file_browser_handlers": [...],
  "homepage_url": "http://path/to/homepage",
  "incognito": "spanning" or "split",
  "intents": {...}
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "offline_enabled": true,
  "omnibox": { "keyword": "aString" },
  "options_page": "aFile.html",
  "permissions": [...],
  "plugins": [...],
  "requirements": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "web_accessible_resources": [...]
}  
{
  "manifest_version": 2,
  "name": "",
  "version": "1.0",
  "description": "test-description",
  "permissions": [
    "https://secure.flickr.com/"
  ],
  // chrome://extensions/ 扩展应用中显示的图标
	"icons":
	{
		"48": "common/img/icon.png",
		"128": "common/img/icon.png"
	},
  // background。会一直常驻后台
	"background": {
		"scripts": ["js/background.js"],
		"persistent": true
	},
  // 浏览器顶部栏交互用
  "browser_action": {
    // 图标
		"default_icon": "common/img/icon.png",
    // 图标点开后,显示交互的html
    "default_popup": "common/html/popup.html"
  },
  // 
  "page_action": {
		"default_icon": "common/img/icon.png",
    "default_title": "Do action",
    "default_popup": "common/html/popup.html"
  },
  // 需要直接注入页面的JS,和web页面交互
	"content_scripts":
	[
		{
      // 定义哪些页面需要注入。这里是所有页面都注入
			"matches": ["<all_urls>"],
			"js": ["common/js/init.js", "modules/spiderTool/js/spiderTool.listener.js"],
			"css": [],
			// 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
			"run_at": "document_start"
		}
	],
	// 权限申请
  "permissions":
	[
		"contextMenus", // 右键菜单
		"activeTab",
		"tabs", // 标签.chrome.tabs和chrome.windows模块需要这个权限
		"notifications", // 通知
		"webRequest", // web请求
		"webRequestBlocking", // 阻塞式web请求
		"storage", // 插件本地存储
		"cookies",
		"downloads",
		"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
		"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
	],
  // 指定本扩展在注入的目标页面上所需使用的资源的路径
  "web_accessible_resources": [
		"common/**.*",
		"modules/**.*"
	]
}

概念

  • content script在Web页面的内部执行javascript脚本。Content scripts与它所在的应用(扩展)并不是完全没有联系,脚本可以与所在的应用(扩展)交换消息。script可以发送消息,或者背景页面发送消息script接收
  • page_action:在地址栏内增加临时的图标
  • browser_action:在工具栏上增加图标

chrome

  • chrome.storage.local.set({ xx: yy }, callback(){});
  • chrome.tabs.executeScript
  • chrome.tags.sendMessage
  • chrome.browserAction
  • chrome.cookies.get()
  • chrome.tags.query
  • chrome.downloads.download()
  • chrome.devtools.network.onRequestFinished.addListener()
  • chrome.extension
  • chrome.extension.getURL()

插件结构模型

  • 结构模型 主要分为三个模块/组件:background、popup、content scripts(插件结构模型.jpg)
  • background.js运行在不可见的background page,用来执行应用(扩展)的主要功能。可以在扩展程序页面中,点击“查看视图背景页”来查看里面的打印信息
  • popup.js作用于弹出的气泡
  • content scripts作用于匹配的页面。可以和web页面交互
  • 三者之间可以通过某种方式进行通信

注:弹窗popup.html可以直接调用背景页面中的函数

content script

  • 在Web页面的内部执行javascript脚本
  • 在一个特殊环境中运行,可以访问注入页面的DOM,但是不能访问里面任何的javascript变量和函数,对每个content script来说,就像除了自己以外再没有其他脚本运行。反过来也是,页面里的javascript不能访问content script中的变量和函数

学习地址

空文件

简介

chrome插件 展开 收起
HTML 等 2 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/max-lu/max-chrome-extensionm.git
git@gitee.com:max-lu/max-chrome-extensionm.git
max-lu
max-chrome-extensionm
max-chrome-extension
master

搜索帮助