前端开发
北京前端外包 电话:185-0032-5287
服务客户有中国移动、方正国际、中百集团等
Search:插件开发
chrome插件会包含哪些文件及文件D:.│ manifest.json│├─html│ index.html│├─images│ icon-128.png│ icon-16.png│├─scripts│ background.chrome插件会包含哪些文件及文件D:.│ manifest.json│├─html│ index.html│├─images│ icon-128.png│ icon-16.png│├─scripts│ background.js│├─styles│ main.css│└─_locales ├─en │ messages.json │ └─zh_CN messages.json简单说明一下： html：存放html页面images：存放插件图标scripts：存放js文件styles: 存放样式_locales: 存放多语言文件manifest.json：一些关于插件的元数据，作为chrome入口文件看目录结构，像不像一个网站？Chrome插件就是一个网站类的应用，它是用html、javascript、css组成的一个webapp; 相比于通常的webapp, Chrome插件还可以调用更多浏览器层面的api,包括书签、历史记录、网络请求拦截、截获用户输入等等。（PS：插件不要随便乱装哦，很危险滴！）重点说一说这个文件：manifest.json如前所述，它包含了一些插件的元数据，作为chrome的入口文件，可以理解为插件的程序清单，那么它到底做了什么事情呢？ 结合示例，我们细细来看： { // 清单版本号，建议使用 版本 2，版本 1 是旧的，已弃用，不建议使用 "manifest_version": 2, "name": "chome-plugin", // 插件名称 "version": "1.8.6", // 插件版本 // 这里写些废话，举个栗子，‘应产品要求，杀个程序祭天’ "description": "This is an extension for your chrome", "icons": { "16": "images/custom/16x16.png", "48": "images/custom/48x48.png", "128": "images/custom/128x128.png" }, //browser_action和page_action只能添加一个 "browser_action": { //浏览器级别行为，所有页面均生效 "default_icon": "images/custom/16x16.png",//图标的图片 "default_title": "Hello ELSE", //鼠标移到图标显示的文字 "default_popup": "html/popup.html" //单击图标后弹窗页面 }, "page_action":{ //页面级别的行为，只在特定页面下生效 "default_icon":{ "24":"images/custom/24x24.png", "38":"images/custom/38x38.png" }, "default_popup": "html/popup.html", "default_title":"Hello ELSE" }, // 可选 "author": "ELSE TEAM", "automation": "...", "background": { "scripts": [ "scripts/background.js", "scripts/devtools-page.js" ] }, "devtools_page": "html/devtools-page.html", // 定义对页面内容进行操作的脚本 "content_scripts": [ { "js":["js/else-insert.js"], "css": ["css/else-insert.css"], "matches":["<all_urls>"] // 只在这些站点下 content_scripts会运行 } ], // 数组，声明插件所需要的权限，这里就是很危险的存在了，想干坏事的你是不是很激动！ "permissions": [ "cookies", "http://*/*", "management", "tabs", "contextMenus" ]}
如果我们需要在vscode中嵌入自己开发的vue页面就需要以下的操作1.把开发好的vue项目打包，如果打包出来的vue执行是空白页，就需要看看之前我写的文章，vue 3 clie打包配置-这里如果我们需要在vscode中嵌入自己开发的vue页面就需要以下的操作1.把开发好的vue项目打包，如果打包出来的vue执行是空白页，就需要看看之前我写的文章，vue 3 clie打包配置-这里要注意的是，要确保vue项目里面的public有一个index用作插件打开时的模板，等一下需要做base的特换，不然插件是不知道网页的根目录在哪里index.html-vue.config.js的配置 favicon.ico">Test favicon.ico">Test -vue.config.js的配置const path = require('path');function resolve (dir) {return path.join(__dirname, dir)}module.exports = {// 基本路径publicPath: './',// 输出文件目录outputDir: 'dist',pages: {index: {entry: 'src/main.js',template: 'public/index.html',filename: 'index.html',chunks: ['chunk-vendors', 'chunk-common', 'index']}},lintOnSave:false,configureWebpack: {externals: {}},chainWebpack: (config)=>{//修改文件引入自定义路径config.resolve.alias.set('@', resolve('src')).set('~assets',resolve('src/assets'))// .set('ide',resolve('src/ide'))} }const path = require('path');function resolve (dir) {return path.join(__dirname, dir)}module.exports = {// 基本路径publicPath: './',// 输出文件目录outputDir: 'dist',pages: {index: {entry: 'src/main.js',template: 'public/index.html',filename: 'index.html',chunks: ['chunk-vendors', 'chunk-common', 'index']}},lintOnSave:false,configureWebpack: {externals: {}},chainWebpack: (config)=>{//修改文件引入自定义路径config.resolve.alias.set('@', resolve('src')).set('~assets',resolve('src/assets'))// .set('ide',resolve('src/ide'))} }2.把打包好的整个dist考到vscode插件里面-vscode插件的命令行触发函数里面，需要这样写const panel = vscode.window.createWebviewPanel('testWebview', // viewType"WebView演示", // 视图标题vscode.ViewColumn.One, // 显示在编辑器的哪个部位{enableScripts: true, // 启用JS，默认禁用retainContextWhenHidden: true, // webview被隐藏时保持状态，避免被重置});//加载本地html页面let srcPath = path.join(context.extensionPath, 'dist');// console.log(srcPath)const srcPathUri = vscode.Uri.file(srcPath);// console.log(srcPathUri.path)const baseUri = panel.webview.asWebviewUri(srcPathUri);// console.log(baseUri)const indexPath = path.join(srcPath, 'index.html');// console.log(indexPath)var indexHtml = fs.readFileSync(indexPath, "utf8");indexHtml = indexHtml.replace('', ``);// console.log(indexHtml)panel.webview.html = indexHtml;const panel = vscode.window.createWebviewPanel('testWebview', // viewType"WebView演示", // 视图标题vscode.ViewColumn.One, // 显示在编辑器的哪个部位{enableScripts: true, // 启用JS，默认禁用retainContextWhenHidden: true, // webview被隐藏时保持状态，避免被重置});//加载本地html页面let srcPath = path.join(context.extensionPath, 'dist');// console.log(srcPath)const srcPathUri = vscode.Uri.file(srcPath);// console.log(srcPathUri.path)const baseUri = panel.webview.asWebviewUri(srcPathUri);// console.log(baseUri)const indexPath = path.join(srcPath, 'index.html');// console.log(indexPath)var indexHtml = fs.readFileSync(indexPath, "utf8");indexHtml = indexHtml.replace('', ``);// console.log(indexHtml)panel.webview.html = indexHtml;这样，打开的页面就能正确显示总结总结总结
一、插件是什么？一、插件是什么？插件是遵循一定规范的应用程序接口编写出来的程序，而chrome插件则是运行在chrome浏览器上的小程序，能帮我们解决一下工作学习中一些重复繁琐的事情。二、插件的基础知一、插件是什么？一、插件是什么？插件是遵循一定规范的应用程序接口编写出来的程序，而chrome插件则是运行在chrome浏览器上的小程序，能帮我们解决一下工作学习中一些重复繁琐的事情。二、插件的基础知识二、插件的基础知识对于chrome插件来说，最核心的应该是manifest.json这个配置文件了，利用它我们可以定义在什么时机在什么网页执行什么脚本，有一些什么行为，下面先看一下manifest.json的格式：{ // 扩展名称 "name": "MyExtension", // 版本。由1到4个整数构成。多个整数间用"."隔开 "version": "1.0", // manifest文件版本号。Chrome18开始必须为2 "manifest_version": 2, // 描述。132个字符以内 "description": ", // 扩展图标。推荐大小16，48，128 "icons": {"16": "image/icon-16.png","48": "image/icon-48.png","128": "image/icon-128.png" }, // 语言 "default_locale": "en", // 地址栏右侧图标管理，含图标及弹出页面的设置等 // 建议至少保留一个设置，不然扩展图标是暗的 "browser_action": {"default_icon": "image/icon-128.png","default_title": "My Message","default_popup": "html/browser.html" }, // 地址栏最后附加图标。含图标及行为等 "page_action": {"default_icon": "image/icon-48.png","default_title": "My Test","default_popup": "html/page.html" }, // 主题，用于更改整个浏览器的外观 "theme": {}, // 指定扩展需要跳转到的URL "app": {}, // 指定扩展进程的background运行环境及运行脚本 "background": {"scripts": ["lib/jquery-3.3.1.min.js","js/background.js"],"page":"html/background.html" }, // 替换页面 "chrome_url_overrides": {"pageToOverride": "html/overrides.html" }, // 指定在web页面运行的脚本/插入的css及运行/插入时机 "content_scripts": [{"matches": ["https://www.baidu.com/*"],"css": ["css/mystyles.css"],"js": ["lib/jquery-3.3.1.min.js", "js/content.js"],"run_at": "document_idle" }], // 安全策略 "content_security_policy": ", "file_browser_handlers": [], // 扩展的官方主页 "homepage_url": "http://xxx", // 插件在隐私模式下的配置 "incognito": "spanning", // 用户操作意图描述 "intents": {}, // 扩展唯一标识。不需要人为指定 "key": ", // 扩展所需chrome的最小版本 "minimum_chrome_version": "1.0", // 消息与本地处理模块映射 "nacl_modules": [], // 是否允许脱机运行 "offline_enabled": true, // ominbox即地址栏。用于响应地址栏的输入事件 "omnibox": {"keyword": "myKey" }, // 选项页。用于在扩展管理页面跳转到选项设置 "options_page": "aFile.html", // 申请权限 "permissions": ["https://www.baidu.com/*","background","tabs" ], // 扩展。可调用第三方扩展 "plugins": [{"path": "extension_plugin.dll","public": true }], // 指定所需要的特殊技术。目前只支持"3D" "requirements": {}, // 自动升级 "update_url": "http://path/to/updateInfo.xml", // 指定资源路径，为String数组 "web_accessible_resources": []}{ // 扩展名称 "name": "MyExtension", // 版本。由1到4个整数构成。多个整数间用"."隔开 "version": "1.0", // manifest文件版本号。Chrome18开始必须为2 "manifest_version": 2, // 描述。132个字符以内 "description": ", // 扩展图标。推荐大小16，48，128 "icons": {"16": "image/icon-16.png","48": "image/icon-48.png","128": "image/icon-128.png" }, // 语言 "default_locale": "en", // 地址栏右侧图标管理，含图标及弹出页面的设置等 // 建议至少保留一个设置，不然扩展图标是暗的 "browser_action": {"default_icon": "image/icon-128.png","default_title": "My Message","default_popup": "html/browser.html" }, // 地址栏最后附加图标。含图标及行为等 "page_action": {"default_icon": "image/icon-48.png","default_title": "My Test","default_popup": "html/page.html" }, // 主题，用于更改整个浏览器的外观 "theme": {}, // 指定扩展需要跳转到的URL "app": {}, // 指定扩展进程的background运行环境及运行脚本 "background": {"scripts": ["lib/jquery-3.3.1.min.js","js/background.js"],"page":"html/background.html" }, // 替换页面 "chrome_url_overrides": {"pageToOverride": "html/overrides.html" }, // 指定在web页面运行的脚本/插入的css及运行/插入时机 "content_scripts": [{"matches": ["https://www.baidu.com/*"],"css": ["css/mystyles.css"],"js": ["lib/jquery-3.3.1.min.js", "js/content.js"],"run_at": "document_idle" }], // 安全策略 "content_security_policy": ", "file_browser_handlers": [], // 扩展的官方主页 "homepage_url": "http://xxx", // 插件在隐私模式下的配置 "incognito": "spanning", // 用户操作意图描述 "intents": {}, // 扩展唯一标识。不需要人为指定 "key": ", // 扩展所需chrome的最小版本 "minimum_chrome_version": "1.0", // 消息与本地处理模块映射 "nacl_modules": [], // 是否允许脱机运行 "offline_enabled": true, // ominbox即地址栏。用于响应地址栏的输入事件 "omnibox": {"keyword": "myKey" }, // 选项页。用于在扩展管理页面跳转到选项设置 "options_page": "aFile.html", // 申请权限 "permissions": ["https://www.baidu.com/*","background","tabs" ], // 扩展。可调用第三方扩展 "plugins": [{"path": "extension_plugin.dll","public": true }], // 指定所需要的特殊技术。目前只支持"3D" "requirements": {}, // 自动升级 "update_url": "http://path/to/updateInfo.xml", // 指定资源路径，为String数组 "web_accessible_resources": []}这么多？先写段代码压压惊，真的别被吓着了，虽然可用的属性有这么多，但是常用的就那么几个，我们一个个看一下：1、name 扩展名称。2、version 插件的版本。3、manifest_version manifest配置文件版本。4、description 对于插件功能的描述。5、icons 插件的图标 可以为插件找一个好看的图标。6、browser_action 可以定义插件的图标，点击插件时弹出的页面，以及插件的标题，建议始终保留一个，直接不设置这个属性图标会是灰色的，设置了后才会亮起来。7、background 背景页，扩展进程的背景运行环境，可以拦截修改请求等等。8、content_scripts 内容脚本，可以指定在什么时机向什么页面插入什么脚本或者css资源9、permissions 权限申请项，比如存储权限storage，请求拦截权限webRequest, webRequestBlocking等等。在了解了这些基础知识之后，剩下的工作就是按照我们想要实现的实际功能，编写代码就好了，下面我们正式开始编写我们的第一个插件，由于是第一个插件，虽然功能很简单，但是我们也要给他取一个响亮的名字“插件终结者”，怎么个终结法，且听我们一一道来。首先我们打开素材链接：http://webpack.wuhaolin.cn，这是一本在线书籍，叫《深入浅出webpack》，讲的非常全面非常好有兴趣的可以看看，回到整体，当我们看第一章的时候，一切都非常的好，但是到了第二张的时候却出现了一个非常烦人的弹窗当然，作为程序员的我们肯定不能被这小小的弹窗难住，然后我们做了第一次尝试，打开开发者工具，找到弹窗所在的节点，移除掉，但是当我们滚动的页面的时候那该死的弹框又出现了，说明有代码在监听弹窗节点，当不存在的时候直接新加一个。接着我们做了第二次尝试，既然你不让我移除节点，那我们不移除了，同样的找到弹窗节点，添加样式：display: none!important;display: none!important;使用!important的目的是为了提升样式的优先级，让弹窗始终不可见，在写入了这个样式后，弹窗就隐藏了，而且滚动的时候也不会再出现，但是当我们看其他章节或者刷新页面的时候那恼人的弹框又出来了，能不能自动处理隐藏呢？是时候展示真正的技术了，我们之前在介绍基础知识的时候提到了content_scripts字段，可以定义在什么时机向什么页面插入什么脚本或css资源，我们只需要在上面的页面加载完成后，向页面注入隐藏弹窗的css代码就好了。.gitbook-plugin-modal { display: none!important;}.gitbook-plugin-modal { display: none!important;}manifest配置文件：{ "name": "PopBlock", "version": "1.0", "manifest_version": 2, "description": "移除闹人的弹框", "browser_action": {"default_title": "PopBlock" }, "content_scripts": [{"matches": ["http://webpack.wuhaolin.cn/*"],"css": ["css/popup.css"],"run_at": "document_end" }]}{ "name": "PopBlock", "version": "1.0", "manifest_version": 2, "description": "移除闹人的弹框", "browser_action": {"default_title": "PopBlock" }, "content_scripts": [{"matches": ["http://webpack.wuhaolin.cn/*"],"css": ["css/popup.css"],"run_at": "document_end" }]}这个并没有添加图标，可以自行添加，然后我们用chrome浏览器开发者模式加载我们编写的插件，会发现再也不会有烦人的弹窗干扰我们的视线了。本节的内容到此就结束了，在这个系列中，我尽量会和大家一起编写一些比较实用的插件，请期待后面的文章吧。猛戳这里下载本文案例源码包猛戳这里下载本文案例源码包
