-
安装
- 安装 Visual Studio Code 和Chrome, 自行翻墙
详细安装这里略过
- 安装包管理工具
用管理员身份运行cmd,输入:
npm install -g bower (全局安装)
-
创建
- 新建目录brochure 进入目录运行
bower install bootstrap@3 vue axios
成功!
-
新建 css, js 目录,并在对应的目录下面新建 index.css 和 index.js文件
-
新建 img 目录,导入图标
-
新建 manifest.json 写入插件配置
{
"manifest_version": 2,
"name": "发现小册",
"version": "1.0.0",
"description": "掘金已发布小册查看插件",
"icons": {
"48": "img/48/book.png"
},
"browser_action": {
"default_icon": "img/48/book.png",
"default_title": "掘金小册查看插件",
"default_popup": "popup.html" (要与外部的入口的html文件名相同)
},
"permissions": [
"contextMenus", (在Chrome的右键菜单中增加自己的菜单项)
"tabs",
"notifications",
"webRequest",
"webRequestBlocking",
"storage"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"js/index.js"
]
}
]
}
注意 : content_security_policy 简称CSP, 是Chrome扩展引入为了减少XSS的发生, 这里我们要设置 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self&