Chrome-Extension

扩大程序是基于事件的程序，用于批改或加强 Chrome 浏览体验，如果此时你想构建一个 Chrome 扩大程序，并致力寻找一篇涵盖 Chrome 扩大程序的整个构思、构建和启动过程的文章，这里有一个综合指南，可帮忙您实现整个过程。 本文分几个局部解说 Chrome 扩大开发的全流程以及高级应用技巧，实用用最新的 v3 版本，心愿这能够节俭您浏览和综合来自多篇文章的信息的工夫，具体内容请参阅官网文档。 为什么是V3？更高的安全性、隐衷性和性能反对 service workers 和 promises取得更疾速的代码审核Chrome 网上利用店不再承受 Manifest V2 扩大为什么应用 Chrome 扩大程序？开发门槛低 简直反对任意的技术栈，对于前端入门用户如果想开发一个简略的用于加强用户体验的插件性能，例如高亮关键字、减少黑夜模式等会比开发传统相似性能的网站和挪动利用成本低的多，即便你不会应用 React 或者 Vue 你也能够通过 Jquery 又或者是原生 Javascript 去实现它。 覆盖范围广 Chrome 在市场份额上以很大的劣势击败了其余浏览器，因而，优先开发 Chrome 扩大是获取下载量和流量最好的入口。插件部署后，所有 Chrome 用户都能够在Chrome 网上利用店下载你的扩大程序。 u can do whtever u want 在你的扩大程序中，你能够不必为浏览器的同源策略担心，你能够在你想要的任意网站中"侵入"你本人的代码，你能够像 React devTools 那样加强你本人的调试器，你甚至能够在你的扩大程序中治理他人的扩大程序（如防钓鱼，防沉迷等）。 Chrome Extension 架构组成manifest.json{ "name": "__MSG_extName__", // 国际化语法，或默认去根目录下找_locales.en(对应的语言包).message.extName "version": "1.0.0", "description": "__MSG_extDescription__", // 同name "icons": { '16': 'src/assets/icons/icon16.png', '32': 'src/assets/icons/icon32.png', '48': 'src/assets/icons/icon48.png', '128': 'src/assets/icons/icon128.png' },"background": { "persistent": false, // 放弃后盾脚本继续流动的惟一状况是扩大应用chrome.webRequest API 来阻止或批改网络申请。webRequest API 与非持久性后盾页面不兼容。默认状况下，"persistent"设置为 true。 "scripts": [ "background.js" ] }, "content_scripts": [ { "js": [ 'src/content/ethers/address.tsx' ], "matches": [ "*://etherscan.io/address/*", "*://*.bscscan.com/address/*" ] } ],"web_accessible_resources": [ { "matches": ['<all_urls>'], "resources": ['src/assets/images/*.png'] } ], "action": { "default_popup": 'src/popup/popup.html', "default_icon": { '16': 'src/assets/icons/icon16.png', '32': 'src/assets/icons/icon32.png', '48': 'src/assets/icons/icon48.png', '128': 'src/assets/icons/icon128.png' } }, "permissions": ['storage', 'webNavigation', 'webRequest'], // 没有用到的权限不要增加，否则审核过不了 "host_permissions": [ '*://explorer.btc.com/*', '*://etherscan.io/*', '*://cn.etherscan.com/*', '*://polygonscan.com/*', '*://*.bscscan.com/*', '*://snowtrace.io/*', '*://optimistic.etherscan.io/*', '*://arbiscan.io/*', '*://ftmscan.com/*', '*://cronoscan.com/*', '*://*.moonscan.io/*', 'https://*.blocksec.com/*', // 本人的业务申请api域名，这样才不会跨域 'https://explorer.api.btc.com/*' // 应用webRequest监听申请信息，被监听的域名也要配置，否则不失效 ] }配置清单有几个留神点： ...

序言Chrome扩大开发是目前比拟火爆的畛域，作为市场占有率第一的浏览器，有海量用户撑持。同时，Chrome扩大能够无缝对接Edge浏览器，不可不谓一举两得。 本文将介绍如何应用webpack构建一个反对Typescript的开发环境，在此基础上，实现一个能够批改网页背景的扩大利用。 Why Typescript ?Typescipt作为JavaScript的超集，次要帮忙JavaScript具备了以下能力： 给JavaScript减少类型零碎，大大降低bug的产生反对最新的ECMAScript个性通过VsCode、WebStorm扩大工具实现类型提醒应用Typescipt的类型提醒零碎，能够大大提高开发效率，笔者在应用时，有一个很大的感触，就是用了就回不去了，就像用了iPhone当前，再用Android，总感觉没有那么丝滑。值得注意的是，Chrome浏览器默认仅反对JavaScript语言进行开发，如果应用Typescript开发就须要应用打包工具将开发好的.ts文件打包成浏览器反对的.js文件。 开始烹饪搭建webpack环境环境初始化我的项目开发目录mkdir chrome-extensioncd chrome-extensionnpm init -y装置须要用到的npm包npm install --save-dev webpack webpack-clinpm install --save-dev typescript ts-loadernpm install --save-dev copy-webpack-pluginnpm install --save-dev @types/chrome首先装置了webpack及webpack-cli,负责将我的项目打包成指标产物;其次装置了typescript以及帮忙webpack解决.ts文件的ts-loader;copy-webpack-plugin插件用来复制配置文件到打包目录，@types/chrome则是Chrome扩大开发用到的Chrome API的类型反对，这样就能够在开发工具中实现Chrome扩大API类型提醒。 减少Typscipt配置文件在根目录创立一个名为tsconfig.json的文件，该文件次要是配置Typescript的编译。 { "compilerOptions": { "strict": true, "module": "commonjs", "target": "es6", "esModuleInterop": true, "sourceMap": true, "rootDir": "src", "outDir": "dist/js", "noEmitOnError": true, "typeRoots": [ "node_modules/@types" ] }}执行完以上操作后，还需在根目录下创立src、public、webpack三个目录 创立webpack配置文件在webpack目录下新增:webpack.config.js，输出如下配置内容： const path = require('path');const CopyPlugin = require('copy-webpack-plugin');module.exports = { mode: "production", entry: { background: path.resolve(__dirname, "..", "src", "background.ts"), }, output: { path: path.join(__dirname, "../dist"), filename: "[name].js", }, resolve: { extensions: [".ts", ".js"], }, module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/, }, ], }, plugins: [ new CopyPlugin({ patterns: [{from: '.', to: '.',context: "public"}] }), ],};首先将打包的模式设置为production，而后指定了输出文件以及输入文件，同时，应用ts-loader解决Typescript文件，最初，应用copy-webpack-plugin将public目录中的文件（ public目录寄存着Chrome扩大必须要蕴含的manifest.json配置 ），复制到打包目录。 ...

地址插件github地址 形容有时候逛github看他人我的项目的时候，想看看他们的package外面援用了什么包，不晓得这些包是干什么的。复制再去搜寻感觉有点麻烦，就想实现一个chrome插件点击包名的时候能跳转到对应的github地址、npm地址或者google搜寻。兴许曾经有插件实现了，懒得去找了，简略的实现一下并不难，也不便当前本人加性能。 实现配置manifest.jsoncontent_scripts的matches属性设置在遇到什么url的时候去执行js脚本，content-script.js既是须要执行的脚本。 popup.html是插件点击后的弹窗，配置一下插件名和形容，增加插件icon。ok，其余的临时不须要。 { "name": "PKG-URL", "description": "Get url of the github project's package.", "version": "1.0", "manifest_version": 3, "content_scripts": [ { "matches": ["https://github.com/*/*"], "js": ["content-script.js"] } ], "action": { "default_popup": "popup.html" }, "icons": { "16": "/imgs/logo.png", "32": "/imgs/logo.png", "48": "/imgs/logo.png", "128": "/imgs/logo.png" }}实现逻辑按情理这些class应该不会变的，获取package.json外面的所有包名的dom，给他们增加点击事件，点击时候弹窗显示npm/github/google选项，到对应的地址。 const highlight = document.querySelector(".highlight");const allBlobCode = highlight.querySelectorAll("tr td.blob-code");const allPkg = handle([...allBlobCode]);const ToolDom = createToolDom();let searchKey = "";allPkg.forEach((item) => { item.style.cursor = "pointer"; item.title = "点击可跳转"; item.addEventListener("click", () => { searchKey = item.innerText.replace(/\"/g, ""); item.parentElement.appendChild(ToolDom); });});解决一下dom，因为它package.json外面的每一行都是tr td包裹的。这里筛选一下，只对 dependencies 和 devDependencies 上面的dom增加点击事件，其它的临时不论。 ...

记录一下本人从零开始构建一个插件的过程～我这个插件的逻辑次要是向指标页面注入一个icon， 1. 创立一个react我的项目首先官网更新，不再提供全局装置的create-react-app，应用 npx create-react-app@latest yourProjectName --template typescript --use-npm装置胜利后，将不须要的文件给删除掉，更改manifest.json这个配置文件，过后应用的是V2版本，后续将其更新为V3版本，次要是chrome浏览器在2023年会将V2版本的给废除掉，:(我的配置文件如下，其中具体的介绍能够查阅这篇文章：chrome插件开发攻略 { // 清单文件的版本，这个必须写，而且必须是2 "manifest_version": 2, // 插件的名称 "name": "demo", // 插件的版本 "version": "1.0.0", // 插件形容 "description": "简略的Chrome扩大demo", // 图标，个别偷懒全副用一个尺寸的也没问题 "icons": { "16": "img/icon.png", "48": "img/icon.png", "128": "img/icon.png" }, // 会始终常驻的后盾JS或后盾页面 "background": { // 2种指定形式，如果指定JS，那么会主动生成一个背景页 //"page": "background.html" "scripts": ["background.js"] }, // 须要间接注入页面的JS "content_scripts": [ { //"matches": ["http://*/*", "https://*/*"], // "<all_urls>" 示意匹配所有地址 "matches": ["<all_urls>"], // 多个JS按程序注入 "js": ["content-script.js",icon.js], // JS的注入能够轻易一点，然而CSS的留神就要千万小心了，因为一不小心就可能影响全局款式 "css": ["icon.css"], // 代码注入的工夫，可选值： "document_start", "document_end", or "document_idle"，最初一个示意页面闲暇时，默认document_idle "run_at": "document_end" }, ], // 权限申请 "permissions": [ "contextMenus", // 右键菜单 "tabs", // 标签 "activeTab", "http://*/*", // 能够通过executeScript或者insertCSS拜访的网站 "https://*/*" // 能够通过executeScript或者insertCSS拜访的网站 ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "externally_connectable":{ "matches":[ "*://*.italent-inc.cn/*", "*://*.italent.link/*", "*://*.italent.cn/*" ] }}先大抵晓得有这么些配置属性就行，上面一步一步的细化首先梳理一下backgound与content之间的关系： ...

对于chrome插件. 可能大家或多或少的都会用几个. 例如wappalyzer, 截图, Fehelper等. 这些在应用浏览器中或多或少的都给予咱们极大的不便. 那如何来开发一个扩大呢. 国内这样的文档也比拟少. 上面咱们就来实地的解剖一下chrome插件所须要的货色. 分析chrome插件如果要开发一个插件, 首先咱们先看一下简略的chrome插件怎么书写. 来看一个例子 https://github.com/orbitbot/chrome-extensions-examples/tree/master/basic_1咱们先看一下目录 ├── icon.png // 图标文件├── manifest.json // 申明文件├── popup.css // popup.html援用的css├── popup.html // 页面文件├── popup.js // popup页面援用的js文件└── README.md // 阐明文件咱们依照已知的来分组. 首先. icon为图标文件, 没撒好理解的. popup.js,html,css全都是一个页面的. 一组. 还有一个manifest.json一组. README.md. 仓库阐明文件一组. 抛除咱们就只须要查看一下manifest.json文件. html/js/css大家都有肯定水平的理解. 阐明咱们的chrome插件的就必须要manifest.json文件. 咱们来看看. manifest.json既然咱们要理解这个json文件. 那咱们得明确外面应该要填写什么内容. 咱们看一下官网提供的较为全面的manifest.json文件. { // 必填 "manifest_version": 3, // manifest版本. 有1,2,3不同的版本所代表的参数不统一. 官网举荐3 "name": "My Extension", // 扩大名称 "version": "versionString", // 扩大的版本号 // 举荐 "action": {...}, // 3版本新进去的. 行为. 能够管制在chrome扩大下面的展现文字等图标 "default_locale": "en", // 默认应用的语言. 如果应用. 则必须在_locales文件夹上面蕴含对应版本的文件 "description": "A plain text description", // 扩大的形容 "icons": {...}, // 图标 // 选填 "author": ..., // 作者 "automation": ..., // 自动化. 目前官网并没有给出对应的信息. "background": { // 背景页参数. // 必填 "service_worker": "background.js", // 背景页的逻辑. // 选填 "type": ... // 类型. 目前能够填写module. 应用ES的模块来进行书写. }, // 笼罩chrome的设置 "chrome_settings_overrides": {...}, // 更改默认的tab页面 "chrome_url_overrides": {...}, // 自定义chrome的命令 "commands": {...}, "content_capabilities": ..., // 内容脚本 "content_scripts": [{...}], // 内容限度策略 csp "content_security_policy": {...}, // 转换用户的脚本 "converted_from_user_script": ..., // csp内容策略 embedder "cross_origin_embedder_policy": {"value": "require-corp"}, // csp关上策略 "cross_origin_opener_policy": {"value": "same-origin"}, // 以后的本地化 "current_locale": ..., "declarative_net_request": ..., // 调试页面 "devtools_page": "devtools.html", "differential_fingerprint": ..., // 事件规定, 次要用于declarativeContent的事件监听 "event_rules": [{...}], // 定义某些网页或扩大拜访你开发的扩大 "externally_connectable": { "matches": ["*://*.example.com/*"] }, // 文件下载器 "file_browser_handlers": [...], // 管理文件下载器 "file_system_provider_capabilities": { "configurable": true, "multiple_mounts": true, "source": "network" }, // 主页地址 "homepage_url": "https://path/to/homepage", // 站点权限. 容许哪些站点关上您的扩大 "host_permissions": [...], // 导入共享的模块 "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}], // 隐身模式设置 "incognito": "spanning, split, or not_allowed", // "input_components": ..., // 公钥 "key": "publicKey", // 最低chrome的版本 "minimum_chrome_version": "versionString", // 申明文件后缀的解决形式 "nacl_modules": [...], "natively_connectable": ..., "oauth2": ..., "offline_enabled": true, // 设置omnibox "omnibox": { "keyword": "aString" }, // 选项菜单所应用的权限 "optional_permissions": ["tabs"], // 选项菜单页面 "options_page": "options.html", // 执行页面和是否应用chrome的ui "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": "https://path/to/updateInfo.xml", // 版本名称 "version_name": "aString", // web资源的拜访权限 "web_accessible_resources": [...]}最初理解了根本的构造. 咱们就先来做一个简略的扩大. ...

stop-mess-around我的项目介绍缩小摸鱼的工夫和频率的Chrome插件：在下班/学习期间很容易下意识的关上摸鱼网站，插件帮忙咱们缩小摸鱼的工夫和频率，进步咱们下班和学习的效率，节省时间用于学习晋升本人或者享受生存。 插件性能匹配摸鱼网址关上网页后，插件会主动匹配本人配置的摸鱼网站。 胜利匹配后，弹出提示信息，提醒用户敞开摸鱼网站。 如果感觉疲乏了，也能够抉择劳动一下。 网站摸鱼检测敞开，摸鱼休息时间揭示当你敞开摸鱼网站检测时，会在摸鱼网站的右侧有一个倒计时揭示以及摸鱼工夫统计。 如果不须要，这项配置能够在插件的治理面板的设置中敞开的。 近百日摸鱼工夫统计表插件会统计近一百天的摸鱼数据，超过一百天则会被删掉。 每天会依据摸鱼耗时进行排序，会统计摸鱼休息时间的点击状况。 如果提前敞开摸鱼，会返回残余的摸鱼工夫 插件治理面板点击插件图标，关上插件治理模板，对插件进行配置。 在线VSCode疾速查看仓库代码当初查看Github仓库代码，能够间接把github.com/仓库地址改成github.dev/仓库地址(官网)和github1s.com/地址，这两种模式来应用在线版的VSCode来查看。 在github1s这个插件看到这个小性能，因为的确蛮实用的，也不想再装插件了，想着把它也集成到本插件中插件间接把按钮显示在仓库名旁边，这样在wiki、actions、issues、Pull Request等页面也能够应用反对github.dev(默认)以及github1s，能够去（插件治理面板 => 设置）更改PS：我以前都是用Octotree文件树来查看代码的，当初感觉能够把这个插件删掉了 哈哈，还是间接用在线VSCode比拟香 演示Gif 插件文档装置插件以及疾速上手 性能示例以及应用阐明 更新日志 点个Star吧~如果感觉这个插件还不错，对你有所帮忙的话，就点个Star⭐️吧~ 插件的价值与应用场景就我集体而言，真的很有用，很有成果。帮我抵制了摸鱼网站的引诱，缩小了摸鱼的工夫与频率，为我节俭了很多工夫。摸鱼时起到揭示的作用，在摸鱼的时候晓得本人在摸鱼。匹配摸鱼网站有弹窗揭示，敞开摸鱼检测又有倒计时和摸鱼时长统计。 在摸鱼的时候晓得本人摸鱼，劳动好之后，就又能够投入学习和工作了。 而不是下意识的关上网页浏览摸鱼网站，因为奶头乐比拟爽，而后一看就是好几个小时过来了，预先又会感觉内疚与充实。 自制力较差的同学，想要进步工作和学习的效率，然而又常常摸鱼，自制力差的同学能够用工具来反抗引诱，摸鱼的高兴很容易让人沉迷。 从而导致工作和学习的效率并不高。 插件应用工夫久了，自然而然也会升高本人摸鱼的频率和工夫的。 摸鱼少了，工作和学习的效率就高了。 节省下来的工夫，能够用于学习晋升本人或者享受生存（早点上班，去浏览，去健身，去吃喝玩乐，做任何本人喜爱的事件）。 须要略微奋斗卷一下的时候，心愿本人缩小点摸鱼。比方需要截止工夫要到了，心愿本人缩小点摸鱼。比方某段时间比较忙，心愿本人缩小点摸鱼。比方要忙着毕设、期末考试等，心愿本人缩小点摸鱼奋斗逼、卷王这类同学不多说了，懂得都懂。 后记鉴于上次刚开源宣传(我用来阻止你摸鱼看沸点、知乎和微博的Chrome插件)的时候，因为不让大家摸鱼，被大伙儿“举报”、训斥为“资本家的走狗” 。 我真的心愿这个开源工具能够无效的帮忙有须要的同学缩小摸鱼工夫，进步工作和学习的效率。 我说这么多的意思不是在“洗地”，大伙儿别再“举报”我了 我是友军 我的其余开源举荐koroFileHeader它是用于一键生成文件头部正文并自动更新最初编辑人和编辑工夫、函数正文主动生成和参数提取。插件反对所有支流语言,功能强大，配置灵便不便，文档齐全，食用简略！插件从2018年5月保护至今, 3K+ Star，敞开issue 300+目前领有250K+的用户，VSCode图表统计日装置用户100多-400多人，帮忙用户养成良好的编码习惯，标准整个团队格调。主动生成头部正文以及自动更新头部正文 函数正文参数生成以及参数主动提取 AutoCommit这是一个用于Git主动commit的VSCode插件，它能够用来补充之前遗记提交commit，帮忙你把首页的绿色格子填满。 LicenseMIT 分割我掘金、前端进阶积攒、公众号、GitHub、微信:OBkoro1、邮箱：obkoro1@foxmail.com

用Chrome插件改良开发体验事件背景因为公司的局部老我的项目（数量还挺多）前端是用hybird形式和app混合开发，前端的登录态是靠app关上时在url拼接一个token，开发环境调试时候用charles抓包，将页面url取出来(url外面带有token)，这样就能开发时在本地模仿用户登录状态问题：因为开发环境账号服务不是很稳固，并且常常用的一些测试账号又有好多人在用，这样就导致一个问题：token总是频繁生效以前token生效时，就再用app从新登录或换账号登录，而后持续用charles抓出新的token，这个过程不仅浪费时间而且还挺烦人解决办法想到开发一个Chrome插件，在插件里输出手机号和明码而后主动将获取到的token拼进开发环境拜访的url里成果如下：点开Chrome插件，输出手机号、明码，点击确定会将取得的token拼进以后页面url里，如果以后url里已存在token（即过期token）则将其替换掉如何开发一个Chrome插件次要通过这篇文章学习的【干货】Chrome插件(扩大)开发全攻略、官网Chrome插件能够实现十分弱小的性能如咱们罕用的 redux-devtool、vue-devtool、掘金插件根底概念在这里就不赘述了，下面的那篇教程应该能解决大多数问题，如果解决不了那就看官网文档我的Chrome插件mock_token的实现我这里次要用到了browserAction的展示模式即上图所示开发步骤：必备一个 manifest.json 文件 重点两个配置：content_script/browser_action "name": "Mock_Token", "version": "2.1", "description": "一个获取用户token的插件", "manifest_version": 2, // 此处必须是2 // 间接注入以后页面的js "content_scripts": [ { "matches": ["http://localhost/*"], // 间接注入页面 "js": ["content.js"], "run_at": "document_start" } ], // 浏览器状态栏的展现 "browser_action": { // 插件图标 "default_icon": "32.png", // 插件题目 "default_title": "获取token-Chrome插件", // 插件的展示页面即一个HTML文件 "default_popup": "./popup.html" }, // 插件所须要的权限 "permissions": ["storage", "webRequest", "tabs", "http://*/*", "https://*/*"], // csp安全策略设置，否则在HTML外链引入jQuery的时候会报csp平安谬误 "content_security_policy": "script-src 'self' https://cdn.bootcdn.net; object-src 'self'"popup.html即点击浏览器状态栏弹出的模态框 <!DOCTYPE html><html lang="en"><!-- head省略 --><head></head><!-- 款式省略 --><style></style><body> <input id="phone" type="text" placeholder="请输出手机号" maxlength="11"> <input id="pwd" type="text" placeholder="请输出明码" maxlength="6"> <button id="btn">确定</button></body><!-- 引入外链js库必须要在manifest.json外面配置CSP安全策略 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><!-- 此文件不可写内联script标签，必须用引入形式 --><script src="./popup.js"></script></html>popup.js 即模态框内容的交互逻辑 ...

stop-mess-aroundchrome插件通过强制的伎俩禁止大家浪费时间摸鱼，在下班/学习期间下意识的关上摸鱼网站, 自动检测摸鱼网站, 提醒激励信息后, 敞开摸鱼网站。Github地址stop-mess-around 插件解决的问题: 进行下意识的摸鱼在工作、学习期间，如果事件不是太忙，或者说在学习/繁忙一小段时间之后。 就会下意识的关上或者输出知乎、掘金沸点、微博等网站，开始了摸鱼时光。 可能是摸鱼奶头乐太高兴了，工夫很快就过来两三个小时，而遗记本人的工作、学习初衷了。 预先咱们通常会为之内疚，感觉很浪费时间 但无奈摸鱼网站深谙兽性弱点，仅靠咱们本身的自律还是很难去抵制这种引诱。 作者自己已经也深受其害，起初我想到能够用工具来限度这种下意识的行为。 于是很喜爱写工具的我, 写了一个脚本用来检测摸鱼网站、检测到了就主动敞开摸鱼网站。 我在通过一段时间的应用之后，我就再也没有在电脑上关上摸鱼网站了，工作学习效率也进步了很多。 很奇怪，每次关上之后就被插件提醒我不要摸鱼，而后被敞开摸鱼网站。 长此以往我就戒掉了在劳动的间隙没事做就关上摸鱼网站的习惯了。 就我集体而言，真的很有用，很有成果，为我节俭了很多工夫。 所以我将它做成chrome插件，开发了可视化的界面，不便不懂技术的人也能够间接上手应用。 心愿这个开源工具能够无效的帮忙大家缩小摸鱼工夫，进步工作和学习的效率。 应用示例增加摸鱼网站以及匹配摸鱼网站弹窗提醒、敞开网页一键开启/敞开以及批量增加摸鱼网站 匹配摸鱼网站后呈现的提示信息 - 随机语录 一些设置提醒。 装置插件chrome利用商店审核中，暂不反对。 本地装置只须要6步即可装置，十分不便，快捷。 关上仓库的releases, 下载最新版本的zip包到本地。 解压刚刚下载的zip包变成一个文件夹。进入chrome扩大程序管理页面选项(右上角)-> 更多工具 -> 扩大程序 关上开发者模式加载已解压的扩大程序抉择方才解压的那个文件夹。 插件文档疾速上手以及应用阐明 插件节省下来的工夫如何正当利用 点个Star吧如果感觉这个插件还不错，对你有所帮忙的话，就给我点个Star)吧~ 我的其余开源举荐koroFileHeader它是用于生成文件头部正文以及函数正文的，帮忙咱们养成良好的编码习惯，标准整个团队格调。插件从18年5月保护至今, 2.7K+ Star，插件反对所有支流语言,功能强大，灵便不便，文档齐全，食用简略！ AutoCommit这是一个用于Git主动commit的VSCode插件，它能够用来补充之前遗记提交commit，帮忙你把首页的绿色格子填满。 LicenseMIT 欢送资助十块八块不嫌多，三块五块也是爱 分割我掘金、前端进阶积攒、公众号、GitHub、微信:OBkoro1、邮箱：obkoro1@foxmail.com

作者：汤圆 集体博客：javalover.cc 前言情谊提醒：本节内容比拟短，次要是因为最近用到了，所以做个记录，不便跟我有同样的需要的人 咱们平时在做封面或者壁纸时，都会去网上找一些图片素材； 有时候一张张找的比拟吃力，所以就想着批量下载，而后缓缓挑； 因为我个别用的都是Chrome浏览器，所以这里给大家举荐两个用的比拟棘手的图片批量下载插件 这里先给大家举荐一个无版权的图片网址https://alphacoders.com/，品种齐全，高清无码目录上面是两个比拟罕用的图片下载插件 ImageAssistant 图片助手Fatkun 图片批量下载注释这里咱们会别离介绍两个插件的优缺点，以及各自的侧重点，大家能够依据本身的场景来抉择适合的插件 1. 图片助手-ImageAssistant地址：Chrome商店-图片助手 毛病： 批量下载的图片标清长处： 操作简略，不便筛选条件丰盛生成的图片命名清晰，高深莫测还反对其余浏览器（比方360，百度）俗话说，有得必有失，像这种能够批量下载的插件，个别都会有个毛病： 就是下载下来的图片都是标清的，即你在浏览器看到的是多大，下载下来的就是多大 如果想要高清的，需手动点击单个图片中的下载按钮(前提是网站反对下载高清图片，比方结尾提到的高清无版权网站alphacoders.com就反对高清下载)插件的主界面如下所示：（仔细的敌人可能曾经发现了，外面有几个图就是我用过的） 能够看到，在筛选方面，条件十分丰盛，反对按类型、分辨率等 在下载方面，反对全选、反选、全下载、选中下载 而且生成的文件可自定义命名，如下所示 2. Fatkun图片批量下载地址：Chrome商店-Fatkun 毛病： 筛选条件不够丰盛批量下载的图片标清长处： 反对淘宝天猫等电商平台，以及微博、小红书等社交平台反对大图解析这款插件绝对于第一款来说，次要的长处就是对各大平台的反对力度比拟大 比方上面的淘宝界面，咱们用这款插件下载时，显示如下界面： 能够看到，连分类都给你做好了，多贴心呐（然而第一款就没有这个性能） 所以次要还是看应用场景了，如果你是做电商的，能够思考用Fatkun 对于它的大图解析，这里须要阐明一下，它指的并不是高清图解析，而是比缩略图等小图大一号的图，咱们能够看下它的解析规定，如下所示： 能够看到，这个大图解析，会把新浪微博界面的小图、缩略图等替换为大图（之所以每个平台都有不同的解析规定，就是因为每个平台存储图片的命名规定不统一） 总结最初还是要联合本身的场景来抉择 如果做电商或者社交平台，能够思考用Fatkun图片批量下载插件如果只是跟我一样找一些壁纸或者封面，那么用ImageAssistant图片助手就够了后记愿你的意中人亦是中意你之人

关上纯文本代码链接时，主动高亮代码，反对191种语言，97个主题 个性反对191种编程语言: json yaml java ...自动检测语言类型加载纯文本代码时主动高亮代码链接：https://github.com/iineva/chr...

明天逛 github 发现一个问题，就是 chrome 浏览器自带的翻译会翻译代码块，就像上面这样：装置完插件之后是这样：难受了奥。链接:https://pan.baidu.com/s/14480sqFh7XCoTR2XMEm9hg 提取码:8wki

前言到了新加坡再也不用考虑科学上网的问题，加上macOS跨平台浏览器做得比较成熟的自然是Google Chrome和Firefox，在Windows平台用了十几年的Maxthon，期间也尝试过无数第三方浏览器，傲游浏览器努力改变着世界却也渐行渐远，有着同样命运的应该还包括我从M8用到MX2的魅族吧。回到Google Chrome浏览器插件和油猴脚本推荐正题，Google Chrome除了最重要的快以外，更重要的是Chrome Web Store上一系列好用插件，我很喜欢Chrome简单纯粹的设计和极致的性能。在插件的推荐上分为通用和开发者两部分来写方便区分，大部分Chrome可用的插件Firefox也同样适用，如果有遗漏或有更好用的同类型插件和脚本欢迎留言分享。 Google Chrome浏览器插件和油猴脚本推荐更新历史2019年08月20日 - 添加自用部分插件和脚本2019年08月01日 - 初稿 阅读原文 - https://wsgzao.github.io/post... 扩展阅读 The 100 Best Free Google Chrome Extensions Chrome Firefox 双修，2019 年度最喜欢浏览器拓展 脚本里的 “赤兔”，2019 年度最喜欢油猴脚本 Chrome插件推荐以下链接大部分都是Google Chrome Webstore，如果无法访问可以考虑从第三方下载到本地导入Chrome Web Store Crx4Chrome Chrome Extension Downloader 通用SimpleExtManager - 我个人首推的管理插件小工具，对于插件控们一定灰常有帮助 IE Tab - 为了向下兼容那些没有与时俱进的网站，大多数时候我们只能选择妥协 Undo Closed Tabs Button - Google原生取消了恢复网页的按钮的设计，你可以通过快捷键或者历史记录恢复，但这个小工具确实可以帮到我 Tampermonkey - 老牌的油猴管理工具，和Violentmonkey暴力猴相比哪款用得顺手选择哪个 沙拉查词-聚合词典划词翻译 - 我个人觉得这是目前Chrome划词翻译插件中体验最好的 Grammarly for Chrome - 智能检查英文语法拼写错误，在Web写邮件和文档时会发现它的重要价值 Evernote Web Clipper - 中文称为印象笔记，平时会把优质的内容保存到Evernote中，虽然没有OneNote功能强大但胜在简单方便可跨平台同步 ...

有时由于种种原因，我们不能直接使用Chrome web store进行Chrome扩展应用的安装，这时可以让一位已经安装了某Chrome扩展应用的朋友将他的应用导出到本地成为.crx文件，然后发给你，这样你就可以通过.crx文件进行离线安装了。这种方式也可以用来作为Chrome扩展应用的备份。 我们先在线安装SAP UI5 inspector这个扩展应用： 根据ui5 inspector这个关键字进行搜索，在结果列表里选中，点击Add to Chrome： 安装完毕后，打开Chrome extension即扩展应用管理器的开发者模式，抄下UI5 inspector的ID： 通过这个ID，我们通过进入如下的路径，能发现安装好的UI5 inspector本地文件： C:Usersi042416AppDataLocalGoogleChromeUser DataDefaultExtensionsbebecogbafbighhaildooiibipcnbngo0.9.5_0 这时就可以把这些文件夹进行打包导出了，点击Pack extension： 输入路径C:Usersi042416AppDataLocalGoogleChromeUser DataDefaultExtensionsbebecogbafbighhaildooiibipcnbngo0.9.5_0，点击Pack Extension： 得到打包好的.crx文件。 发给你的朋友，他就可以进行离线安装了。 要获取更多Jerry的原创文章，请关注公众号"汪子熙":

每次百度搜索，搜索结果的右边总是出现些乱七八糟的搜索热点（推的都是些什么玩意，高校替课和我有毛关系，几个悲伤的热点我用星号顶掉了）。 强迫症想把它隐藏掉，我用的是chrome浏览器，受adblock（超强屏蔽广告插件）的启发，想到做浏览器插件的方式。 本文简单记录一下插件开发过程，chrome插件开发真的非常简单，只需要一点点前端的知识就可以了，以下是本次插件开发、打包、安装全部过程。一、插件介绍chrome插件，即chrome扩展程序，地址栏输入chrome://extensions即可查看已安装的插件(比如下图中的第二个就是本次开发的插件):二、插件开发 准备工作　仅需安装chrome浏览器以及一个文本编辑器即可。创建一个文件夹，随意起你喜欢的名字，这里我创建的是‘brisk_page’，意为＂清新网页＂创建名为配置manifest.json文件。配置文件是插件的核心部分，其内容是json格式的，很类似前端项目包管理的package.json。该文件内容大概如下，每一项的含义都注释了：{ "name": "BriskPage", //　插件名称 "version": "0.0.8",　// 插件版本号 "manifest_version": 2,　// chrome18以后要求必须设置,不然打包会报错 "description": "control the web page with CSS",　// 对插件的简单描述,本插件是通过CSS来简单控制页面那些元素隐藏 "browser_action": {　// 配置插件的一些资源地址 "default_icon": "favicon.jpeg",　// 图标，需要提供图标文件 "default_title": "清新网页",　// 标题 "default_popup": "popup.html"　// 弹窗文件，就是点击插件图标，需要提供popup.html文件 }, "content_scripts": [ // 该项可无，不过如果我们想操作页面dom的话，是需要配置的 { "matches": ["*://www.baidu.com/*"], // 对于百度站点网页，注入brisk.js "js": ["brisk.js"] } ]}根据配置文件将图标文件、弹窗文件、js文件放到插件文件夹下： 编写js代码代码非常简单，就是动态创建一个style标签，把隐藏Dom相应的CSS写入后，插入原网页，这样就能达到隐藏相应dom的目的啦，这里有个细节点的东西就是观察原网页变化，使用了MutationObserver实例对象，当页面中Dom发生变化时，检查页面内是否有我们插入的style标签，有就不作任何处理，没有则插入。代码如下： // brisk.js function hideDom () { if (document.querySelector('style[brisk]')) return let style = document.createElement('style') style.setAttribute('type', 'text/css') style.setAttribute('brisk', true) style.innerHTML = ".FYB_RD { display:none }" document.head.appendChild(style)}let mutationObserver = window.MutationObserverlet observer = new MutationObserver(hideDom)observer.observe(document, { childList: true, subtree: true })编写弹窗代码弹窗是插件与用户交互的界面，就像正常的html页面一样，不过这里不用写<head><body>等标签，直接写html代码即可,本插件目前暂无什么交互，所以代码简单明了，仅仅说明插件功能： ...

最近天天加班，无奈。频频要到手机上去测试页面。最快捷的方法就是把网址生成为一个二维码，手机上一扫即可访问。 自己写过一个 chrome 扩展，上一次的版本还停留在 2014 年，当时的我刚刚毕业不久，用的 jquery qr 插件实现。 界面简陋，功能好用，过去了这么多年，现在再来看当年做的，感觉太丑了，而且在 dark mode 下 icon 也看不清了，索性就来改一改。 第一版icon 改成了暗红色，去掉了底部的输入框生成二维码，因为我自己极少用到这个功能。 周末发布，周一就有老同事找我，说你的插件怎么把输入框功能去掉了。 感动，想不到这么多年，老同事一直在用我写的插件，想着抽空完善一下。 第二版今天抽空再次完善了一下，加入了输入框，兼顾美观。 替换了臃肿的 jquery qr，采用了更加小巧的 kjua，最终扩展的体积缩小到了 14.47KiB。 顺便说一句，用 parcel 来打包真的很方便。大家可以在 chrome 应用商店 找到该扩展，如果觉得这个扩展对你有用，请点赞哦。

1. 前言继上周第一次开发Chrome插件github-star-trend之后，我就一直寻思有什么现实问题可以用插件来解决呢？正当我在浏览器中搜索寻找灵感时，打开的众多tab选项卡令我灵光一闪。 咦，为什么不做一个插件用来管理tab呢？每次同时打开过多的tab选项卡时，被挤压的标题总是让我分不清哪个是哪个，查看起来十分不便。于是乎，经过一个周末下午的折腾，我倒腾出这么个东西（gif图可能有点大，请耐心等待...）： 2. 准备工作按照惯例，正式进入主题之前让我们来先了解点预备知识。默默打开Chrome插件的官方文档，直奔我们的Tabs。可以看到它为我们提供了很多方法，而且竟然还有executeScript，这个可以说权限非常大了，不过跟我们这次的需求没啥关系。。。 2.1 query由于我们的需求是管理tab选项卡，所以首先肯定得获取所有的tab信息。扫了一遍Methods，最相关的就是方法query： Gets all tabs that have the specified properties, or all tabs if no properties are specified.正如官方介绍，该方法可以根据指定条件返回相应的tabs；且当不指定属性时，可以获得所有的tabs。这恰好满足我们的需求，按照API指示，我在callback中尝试打印出了拿到的tabs对象： chrome.tabs.query({}, tabs => console.log(tabs));[ { "active": true, "audible": false, "autoDiscardable": true, "discarded": false, "favIconUrl": "https://static.clewm.net/static/images/favicon.ico", "height": 916, "highlighted": true, "id": 25, "incognito": false, "index": 0, "mutedInfo": {"muted":false}, "pinned": true, "selected": true, "status": "complete", "title": "草料文本二维码生成器", "url": "https://cli.im/text?bb032d49e2b5fec215701da8be6326bb", "width": 1629, "windowId": 23 }, ... { "active": true, "audible": false, "autoDiscardable": true, "discarded": false, "favIconUrl": "https://www.google.com/images/icons/product/chrome-32.png", "height": 948, "highlighted": true, "id": 417, "incognito": false, "index": 0, "mutedInfo": {"muted": false}, "pinned": false, "selected": true, "status": "complete", "title": "chrome.tabs - Google Chrome", "url": "https://developers.chrome.com/extensions/tabs#method-query", "width": 1629, "windowId": 812 }]仔细观察不难发现，两个tab的windowId不同。这是由于我在本地同时打开了两个Chrome窗口，而这两个tab恰好在两个不同的窗口内，所以正好符合预期。 ...

1. 前言这天，在逛github（就是划水）的时候，突然想看看某个仓库的star走势，但是在star列表中翻了半天愣是没找到相应的功能。于是乎，谷歌一搜，发现有个叫Star History的谷歌插件，然而竟然要收费。。。 于是，又接着搜索，发现了这个仓库。好巧的是，这个仓库就是那个插件的源码。稍微瞅了下源码，感觉我也能行？ 由于之前就想学学怎么写chrome插件，本着学习的态度和好奇心驱使（都是划水，没有什么不同），于是也做了一个可以查看仓库Star趋势的插件。效果如下： 2. 准备工作2.1 chrome插件简单入门由于也是第一次写Chrome插件，作为小白，就先搜搜大家都是怎么写chrome插件的吧。果然，一搜一大堆。。。不过，最终还是选择了官方文档，毕竟是第一手资料，虽然是英文，但写得还算通俗易懂，阅读起来没啥问题。 这里推荐看Getting Started，非常友好，一步步教你完成一个最简单的修改网页背景颜色的Chrome插件。跟着教程完成之后你就会发现，原来Chrome插件就像完成一个web项目一样。 manifest.json是项目的配置文件（类似于package.json），插件所需要的一些能力（例如Storage）就在这个文件中声明。剩下的工作，无非就是根据Chrome插件提供的API实现你想要的功能即可。 我们来看下要创建的项目目录和manifest.json配置文件： ├── README.md├── dist│   └── bundle.js├── images│   ├── trending128.png│   ├── trending16.png│   ├── trending32.png│   └── trending48.png├── manifest.json├── package.json├── src│   └── injected.js└── webpack.config.js{ "name": "Github-Star-Trend", "version": "1.0", "manifest_version": 2, "description": "Generates a star trend graph for a github repository", "icons": { "16": "images/trending16.png", "32": "images/trending32.png", "48": "images/trending48.png", "128": "images/trending128.png" }, "content_scripts": [ { "matches": ["https://github.com/*"], "js": ["dist/bundle.js"] } ]}这里需要解释一点，根据最一开始我们看到的效果图，可以发现我们正在浏览的页面上多了一个Star Trend按钮。所以我们要完成的插件需要能够往页面注入一个按钮，而这正是通过manifest.json中的content_scripts字段实现的。它允许我们往matches字段匹配的网页中注入js字段中的脚本文件。 ...

翻译：疯狂的技术宅原文：https://www.sitepoint.com/bui... 未经允许严禁转载 浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。好消息是浏览器扩展并不难写。可以用你已经熟悉的 Web 技术（HTML、CSS 和 JavaScript）创建 —— 就像普通网页一样。但是与网页不同的是，扩展程序可以访问许多特定于浏览器的 API，这才是有趣的地方。 在本教程中，我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展。这个扩展程序的 JavaScript 部分，我将使用 Vue.js 框架，因为它将允许我们快速启动并运行，而且用 vue 工作是很有趣的。 本教程的代码可以在GitHub上找到 Chrome 扩展程序的基础知识Chrome扩展程序的核心部分是 manifest 文件 和后台脚本。manifest 文件采用JSON格式，提供有关扩展的重要信息，例如其版本、资源或所需的权限。后台脚本允许扩展对特定的浏览器事件做出反应，例如创建新选项卡。 为了演示这些概念，让我们先写一个“Hello，World！” Chrome 扩展。 创建一个名为 hello-world-chrome 的新文件夹和两个文件：manifest.json 和 background.js： mkdir hello-world-chromecd hello-world-chrometouch manifest.json background.js打开 manifest.json 并添加以下代码： { "name": "Hello World Extension", "version": "0.0.1", "manifest_version": 2, "background": { "scripts": ["background.js"], "persistent": false }}name、version 和 manifest_version 都是必填字段。 name 和 version 字段可以是你想要的任何内容; manifest version 应设置为2（从Chrome 18开始）。 ...

最近基于 Github API 开发了一款图床 Chrome 插件 Picee，现在已经开源并上架 Chrome 应用商店。当中的过程涉及到一些有趣的知识点，故将其记录下来。 Github地址：https://github.com/jrainlau/p...Chrome商店下载地址：Picee 灵感平时有写点东西的习惯，但是奈何一直找不到合适的图床。有人推荐以微博或者七牛来做图床，但是总给我一种”受制于人“的感觉，不知道什么时候就会被各种限制，比如禁止图片外链等等。后来发现其实 Github 是非常适合做图床的，因为仓库里的文件都可以通过 https://raw.githubusercontent.com 这个链接直接外链以供下载。但是如果为了写个文章而每次添加图片都需要一顿 Git 操作，那么写作体验必定非常不好，如果有更方便的办法就好了——那就是Github API。 Github APIGithub 提供了一套完善的 API 以供操作，几乎涵盖了开发一个完整 Github 客户端的所有功能。API 分为 REST 风格的 v3 版本和 GraphQL 风格的 v4 版本。为了使用方便，我选择的是 v3 版本。具体的 API 细节可以在官方文档查看。 要制作一个图床应用，我们只需要用到上传文件的 API 即可。但是在调用这个 API 之前，首选需要用户对应用进行授权，也就是所谓的登录操作。 授权对于一般的”查看”操作，是不需要授权的，比如获取用户的公开信息，获取公有仓库的 issues 等等。但是有两个场景是需要授权的，其一是任何对于仓库的“增删改查”操作（包括提交 issue，评论等）；其二则是对于某 IP 有 API 的调用次数限制，若这个 IP 调用 Github API 的次数过多则需要授权。 那么授权应该怎么做呢？官方提供了三种办法，分别是 Basic，oAuth2 token和oAuth2 key/secret。 Basic授权也就是最传统的账号密码授权方式，我们可以在命令行用 curl 来测试之： curl -u "账号:密码" https://api.github.com如果是正确的账号密码，则会返回一系列的内容，否则会返回错误信息。 ...

copypage把你喜欢的html页面完整的复制到本地，再也不用自己写css样式了。只需3步轻松安装把app/chrome-extension拖入谷歌浏览器扩展里面进行安装（勾选开发者模式）npm installnpm start ## 使用 安装成功之后浏览器中点击鼠标右键会增加如下菜单：点击之后，便可在server/web下面去查看当前页面啦。交流提问注意，作者只受理以下提问方式，其他方式直接忽略直接在 github issues 提交问题版本更新每次版本更新已经解决的问题都提交到这里所有待解决的问题都在这里

jSearchjSearch(聚搜) 是一款专注内容的chrome搜索扩展，一次搜索聚合多平台内容。下载： https://github.com/dubox/jSea...jSearch(聚搜)是一款专注内容的搜索扩展，一次搜索聚合多平台内容，支持自定义站点搜索收藏夹搜索、历史记录搜索支持地址栏搜索超级方便的搜索快捷键帮你开启新世界大门。&使用方法Ⅰ.将浏览器默认搜索引擎设置为 google 或百度时，可使用地址栏搜索直接进入本插件。Ⅱ.使用快捷键呼出快捷搜索框(jBar)，进行快捷搜索快捷键支持：呼出：Ctrl+j、space(在可编辑区域无效)、j(在可编辑区域无效) ， 收起：Ctrl+j、tab、esc、space(只在搜索框没有内容时有效)&隐私声明本人以人格担保：插件不上传任何用户隐私信息&插件安装方法https://jingyan.baidu.com/art…&插件截图&鸣谢感谢开源项目：VUE 、iview 、hotkeys.js、vue-dragging

浏览器基本已经天下大统了，放眼望去都是Chromium的天下。那么，能写一个浏览器插件也算是一种回报率不错的技能。基本知识浏览器插件官方的说法叫扩展程序，允许你为浏览器增加各种功能，但不需要深入研究浏览器本身的代码。你可以用HTML，CSS和JavaScript创建新的扩展程序，如果你曾经写过网页，那么写一个插件是非常轻松的事情。常见的插件一般就是地址栏后面的一个图标，点击后给你当前网页提供各种功能，或者在你点击网页右键时弹出额外的菜单。程序目录结构最简单的扩展程序只需要3个文件，或者更少。my-addon |- manifest.json |- icon.png └─ popup.htmlmanifest.json：清单文件，用来描述插件本身，必须。icon.png：图标文件，如果你不想用默认图标这也是必须的。popup.html：算是插件的功能页吧，你至少得有点功能才有存在的意义吧。当然上面的例子是最精简的情况了，一般的插件会有多个html，还有js目录，css目录等等，你可以把插件当成一个静态网站，唯一的区别是多了一个manifest文件用来描述这个静态网站。清单文件示例下面是一个精简版的manifest.json。{ “manifest_version”: 2, “name”: “One-click Kittens”, “description”: “This extension demonstrates a browser action with kittens.”, “version”: “1.0”, “permissions”: [ “https://secure.flickr.com/” ], “browser_action”: { “default_icon”: “icon.png”, “default_popup”: “popup.html” }}看上去是不是很直观，名字，版本，描述，权限，行为。如果要深入再查查官方文档就OK了。Hello World插件有了基础知识，我们速度来个Hello World，先写manifest.json。{ “manifest_version”: 2, “name”: “Hello”, “version”: “1.0.0”, “description”: “Hello, Chrome extension.”, “icons”: { “16”: “img/icon.png”, “48”: “img/icon.png”, “128”: “img/icon.png” }, “browser_action”: { “default_icon”: “img/icon.png”, “default_title”: “Hello World”, “default_popup”: “popup.html” }, “permissions”: [ “<all_urls>” ], “homepage_url”: “https://github.com/tobyqin/"}再补一下图标文件和popup.html。<!DOCTYPE html><html><body><h1>Hello world!</h1></body></html>打开浏览器插件页面，右上角打开开发者模式，加载插件目录。这时我们的第一个插件就好了，点击插件图标就可以显示Hello World。把Vue加进来好像很容易嘛，我们直接用CDN的Vue，改造一下popup.html。<!DOCTYPE html><html><body><div id=“app”> {{ message }}</div><script src=“https://cdn.bootcss.com/vue/2.6.6/vue.js"></script><script> var app = new Vue({ el: ‘#app’, data: { message: ‘Hello Vue!’ } })</script></body></html>不用卸载刚才安装的插件目录，只要再点击一下插件按钮就会自动加载最新的代码。不过好像不对，和期望的结果不一样。而且注意看插件页面，出现错误了。Refused to load the script ‘https://cdn.bootcss.com/vue/2.6.6/vue.js' because it violates the following Content Security Policy directive: “script-src ‘self’ blob: filesystem: chrome-extension-resource:”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’ blob: filesystem: chrome-extension-resource:”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-fMtOu4CF/4bYGHZuo6ltgNQyLcxFW9rBnAYSk3yz53w=’), or a nonce (’nonce-…’) is required to enable inline execution.默认情况下，浏览器插件权限是非常低的，不允许访问除了插件本身的文件以外的文件，不能调用页面内脚本（inline script），也不能使用eval之类的函数。你需要在manifest文件中配置好Content Security Policy（CSP）才能使用Vue。{ “manifest_version”: 2, // … “browser_action”: { // … }, “content_security_policy”: “style-src ‘self’ ‘unsafe-inline’;script-src ‘self’ ‘unsafe-eval’ https://cdn.bootcss.com; object-src ‘self’ ;"}因为这个CSP写起来实在不怎么友好，伟大的网友做了一个工具可以帮你一把。https://github.com/foundeo/co…接下来，把页面内的script内容搬到单独的文件。// popup.html<!DOCTYPE html><html><body><div id=“app”> {{ message }}</div><script src=“https://cdn.bootcss.com/vue/2.6.6/vue.js"></script><script src=“app.js”></script></body></html>// app.jsnew Vue({ el: ‘#app’, data: { message: ‘Hello Vue!’ }})刷新一下插件，搞定了。如何调试插件调试插件和调试一个普通的网页一样简单，右键选择审查元素就好了。包括插件的配置页面，新弹出的页面等等，都可以用一样的方法调试。如何发布插件当你完成插件开发后，在启用开发者模式的插件中心就可以看到打包插件按钮，这个按钮可以帮你快速打包crx文件，第一次打包你不需要提供密钥，它会帮你生成一个密钥，之后的版本升级你需要用同一个密钥打包，否则就被认为是一个新的插件了，所以切记保存好密钥。拿着打包好的crx文件你就可以到商店发布啦，不过发布到谷歌商店是要交钱的，一年9.9美刀的开发者会员。国内的各种商店收不收费不知道。比较恶心的是，如果你的插件没有在谷歌浏览器的商店里上架，Chrome浏览器是不认的，以前还可以拖到插件页面安装，现在怎么都绕不过去了。但基于Chromium开发的第三方浏览器还是可以装的，比如Opera，QQ，360等等。一些技巧他山之石可能你要做的插件别人已经做过了，或者你想借鉴别人的插件，有两个方法。右键审查别人的插件页面，看看代码怎么工作的。安装一个下载crx的插件，然后把别人的插件从商店下载到本地，重命名为zip并解压，就可以看到源码了。当然啦，别人的源码可能做过混淆加密。插件页面大小如果你的插件会弹出一个页面，浏览器默认会根据内容自适应页面大小，就像上面例子里的那个hello world，很丑是吧。一般插件页面都是限制body高度和宽度的，这样才不会歪。安全请求现在很难找到不是https的页面里，所以你的插件里如果会往后台发送请求的话，也是需要支持https协议的，否则会被拦截的。插件配置如果你的插件是可配置的，怎么保存配置信息呢？直接用localStorage就行了。localStorage对每个站点都是独立的，每一个插件可以看成独立的站点，所以当你在插件里调用localStorage对象时就是当前插件的localStorage。如果你希望配置是可同步的，那么请考虑chrome.storage对象，里面提供了storage.local 和 storage.sync 。完整的例子不想推荐文档什么的，自己需要会去搜索的。那么有没有一个完整的例子？当然有啦，去看我的github吧，觉得不错就点个赞。https://github.com/tobyqin/ch…关于作者：Toby Qin, Python 技术爱好者，目前从事测试开发相关工作，转载请注明原文出处。欢迎关注我的博客 https://betacat.online，你可以到我的公众号中去当吃瓜群众。 ...

前言其实18年之前写过一篇关于chrome插件的文章，里面安利了4个chrome插件。鉴于这已经是9102年了，之前觉得好用的chrome插件跟新了解到的比起来，还是差了那么点味道。所以决定再更新一波，顺便补上之前漏掉的几个插件。运用有效的有用的插件，会让我们的工作在一个相对舒适的状态，工作起来更加的流畅。Toby-不直观算我输大家可以将Toby当成加强版的书签栏，大家可以分类把常去的网站收藏起来，还可以正对每个分类打上对应的tag，在右上角进行筛选。当你打开了很多要用的网站，但是不得不关闭电脑时，toby可以一次性将目前打开的所有的网页全部存下来，下次再打开浏览器时，直接恢复就可以了。官网地址：–>戳这<–安装地址：–>戳这<–todoist-忘了要做什么是不可能的如果你每天都太多的事情需要做，但是记性不太好，有些时候会把大部分需要做的事情忘记，那么你可能需要todoist。这是一个插件式的to-do-list。在App Store里面还有桌面版的todoist，登陆同样的账号就可以实现数据联动。官网地址：–>戳这<–安装地址：–>戳这<–recover close tab-再也不翻历史记录经常手残把需要用到的网页给关掉了？关掉了还不不知道网址？不知道网址还要去历史记录中找一遍？recover-close-tab就是为你准备的。它可以直接打开你最后一个关闭的网页。特别适合手残党。安装地址：–>戳这<–saladict-妈妈再也不用担心我看不懂英文文档这是一款翻译用的插件。对一个需要翻译的句子或者单词，给出多种翻译工具的参考。只需要简单的双击单词，再hover旁边的logo，就可以了。有的时候这个翻译工具的翻译结果和另外一个工具的翻译结果是有一定的差别的，所以综合多个结果参考，才能更好的理解原文的意思。官网地址：–>戳这<–安装地址：–>戳这<–crx-mouse-这辈子不可能再点回退键自从用了这个插件之后，我觉得再点击左上角的退回键是有多么的难受。利用这个鼠标手势插件，按住右键轻轻往左一滑，就可以回退到上个访问的网页。就像我之前说的，很流畅。还有很多其他的手势可以用，例如移动到左边的tab、移动到右边的tab、new一个tab、关闭当前tab、前进、后退、快速向下滑一页、快速向上滑一页等等，十分有用。官网地址：–>戳这<–安装地址：–>戳这<–octotree-终于可以安静的看源码了在github上看一些项目的源码的时候，回到上一级的体验很不好，有的时候要等很久，有的时候找文件也要很久。而这个插件可以像你的ide一样将整个项目的树形结构展示出来。安装地址：–>戳这<–写在后面欢迎各位大佬安利你们觉得好用的插件，大家可以一起分享交流，相互提升自己的"用户体验"。

分享几个常用的chrome浏览器插件

源起写这个插件的初衷是因为 Medium 总是不高亮作者的代码。当然也有人用 Codepen, CodeSandbox 或者 Gist 来嵌入代码。 但是这样实在麻烦，有些人（比如我）就很不想为了几句代码而创建一个 Gist 文件，然后直接用 Medium 提供的代码块。所以我经常看到这样的代码块为了解决这个问题，我就写了这个插件来高亮 Medium 里的代码块，后面还意外发现简书，知乎，StackOverflow 等网站都能高亮，嘻嘻！样例先看看效果吧~安装与下载可以点击这里从谷歌应用商店下载。如果不能科学上网，可以直接从我 Github 上直接下载。使用点击插件图标后会弹出下面的设置面板，看起来有点像编辑器。如果像平时写网页的UI布局就太无聊了，所以设计UI成编辑器的样子????。更多更多内容可以访问 Github 上的 repo我也在 B 站上录了个介绍视频，有兴趣可以点击这里观看。最后在巴哈马旅游的时候就在构想这个插件，元旦回来后立马开工写了7天左右，其中也修复了很多 Bug。 当然 Bug 是修不完的，肯定还有一些 Bug 我没发现，如果你遇到了请给我写 Issue！ 如果你也喜欢我的插件，麻烦给个五星好评 :)，谢谢！

最近公司有业务需求需要做一个Chrome插件，原本想着用jQuery + Bootstarp搞定。但是由于已经使用Angular已经太久了，重新再用jQuery有点蛋疼。后面查了一下资料，发现有人用React写过Chrome插件。仔细看了下，觉得实际上应该是一样的原理。尝试了一下Angular + Material，果然可以，过程如下:1.先贴配置Angular CLI: 7.1.3Angular: 7.1.3Node: 10.11.0Material UI: 7.2.1配置理论上不需要跟我一样，我贴出来的原因是方便有个参考而已。Angular 4以上的版本应该都是可以通用的。2.Angular项目打包编译没有项目的话用CLI新建一个ng new OneAngularProject已有项目的直接在项目下buildng build注意，build时不用任何参数，以往我们为了压缩合并js,css等文件会添加参数，以保证build出来的是最小版本。但如果是构建Chrome插件的话，就不能加参数了。3.编辑manifest.json我项目里的mainfest.json如下{ “manifest_version”: 2, “name”: “Angular Chrome Extension”, “description”: “Miner app as chrome extension using angular7”, “version”: “1.0”, “browser_action”: { “default_icon”: “favicon.ico”, “default_popup”: “index.html” }, “permissions”: [], “content_security_policy”: “script-src ‘self’ ‘unsafe-eval’; object-src ‘self’”, “web_accessible_resources”: [ “assets/css/”, “assets/js/”, “assets/fonts/*” ]}“content_security_policy”: “script-src ‘self’ ‘unsafe-eval’; object-src ‘self’” 注意这句一定要加上，不加上的话会报错web_accessible_resources 字段看自己项目里的业务需求请自定义4.将build好的文件放入manifest.json所在文件夹下在Chrome浏览器中加载该插件即可，记得要打开开发者模式效果如图：具体如何开发Chrome插件和一些细节，这里就不提了。有兴趣的可以看这个博客里的文章，个人觉得写得还是很不错的。chrome插件开发教程

比如下图这种，记性不好，忘记了密码该怎么办？很简单，Chrome浏览器里按F12打开开发者工具，切换到Elements面板，点击下图Step1的图标，然后单击密码显示框，保持这个字段处于选中状态，然后切换到Console标签页，输入$0.value, 回车就能看到密码了。要获取更多Jerry的原创文章，请关注公众号"汪子熙":

还在为看文章、文章时遇到需要search的时候步骤太麻烦而烦恼？idocs maybe help~????????????idcos是一个chrome小插件，帮助在浏览的时候快速查找内容。选中文字然后按两下alt键来进行查询。可以配置搜索语言和搜索引擎。目前支持 google, git, mdn 和 baidu为什么用它？因为觉得其他的都不好用而且麻烦！欢迎交流或者建议，github: https://github.com/LYnnProspe…目前商店审核中，欢迎在github上下载offline crx文件使用

一、环境安装安装nodejs首先需要安装nodejs，可以到官网下载，不过推荐使用nvs来安装nodejs。这里使用的是v11.5.0版本安装yeomannpm -g install yo安装generator-web-extensionnpm install -g generator-web-extension二、项目搭建# 创建项目目录mkdir helloworld && cd helloworld# 生成项目文件yo web-extension然后根据提示完成项目配置上图是询问是否需要UI ActionNo：不需要Browser：创建浏览器级别的UI ActionPage：创建页面级别的UI Action本示例选择Page来进行演示上图是询问是否需要覆盖一些浏览器的默认页面No：不需要Bookmarks Page：覆盖浏览器的书签页面History Page：覆盖浏览器的历史页面Newtab Page：覆盖浏览器的新标签页面本示例选择No上图是询问扩展需要的页面或者脚本Options Page：扩展的设置页面Devtools Page：在devtools里面的页面Content Scripts：在访问页面中运行的脚本Omnibox：给地址栏增加的功能按空格键根据需要进行选择，也可以按a键全部选择，本示例选择来全部上图是询问这个扩展需要的权限，因为这个扩展不只可以运行在chrome，还可以运行在firefox等其他一些浏览器上，有些权限是chrome浏览器不支持的，可以根据需要进行选择，也可以按a全选，然后后面再删除掉不支持的权限。这里为了简单先全选。然后接下来的一路按回车就可以了项目创建完毕三、运行项目编译项目npm run dev chrome可以看到编译生成了很多文件，生成的扩展目录是dist/chrome/用chrome把扩展加载起来打开chrome的扩展管理页面，打开开发者模式，加载已解压的扩展程序，选择刚才生成的dist/chrome/目录可以看到扩展已经加载了，但是有个错误按钮。点击这个按钮查看错误信息前面在选择权限的时候选择了所有权限，但是有些权限是chrome不支持的，因此需要把这些权限删掉扩展需要的页面、脚本、配置等都在app/目录里面，一般只需要修改里面的文件就可以了要修改权限，打开app/manifest.json文件，找到提示的几个权限全部删除掉重新加载一下扩展修改文件重新编译有点慢，多点几次应该就可以了随便打开一个页面，可以看到扩展已经成功运行了四、打包npm run build chrome运行完打包命令之后，会在packages/目录下面生成扩展的压缩包五、其他使用firefox加载扩展先进行编译npm run dev firefox用firefox进行加载firefox需要选中manifest.json文件可以看到扩展已经运行成功了六、附录Chrome扩展及应用开发【干货】Chrome插件(扩展)开发全攻略浏览器扩展generator-web-extension

本文介绍如何快速创建一个基于webpack构建的chrome扩展，由于chrome扩展开发概念很多，如果需要，请结合附录食用。首先需要安装好nodejs，推荐用nvs或其他工具管理node版本。这里用的是v8.5.0版本（之前用了v11.1.0在运行npm start的时候会报错，因为对chrome扩展来说node只是个构建工具，并且用nvs来管理node版本切换很方便，就不追究为什么报错了）。一、安装yeomannode -g install yo二、安装生成chrome扩展的generatornpm install -g generator-chrome-extension-kickstart三、使用yeoman创建项目# 创建一个空目录mkdir helloworld && cd helloworld# 运行yeoman生成项目yo chrome-extension-kickstart .然后按照提示进行项目配置上图是选择需要创建的UI actionNo：不创建Browser：浏览器级别的action，一个浏览器一个实例Page：页面级别的action，每个页面一个实例这里我们先选择Page上图是选择需要覆盖的浏览器的一些默认页面No：不需要覆盖任何默认页面Bookmarks Page：覆盖书签页面History Page：覆盖历史页面Newtab Page：覆盖新标签页面这里我们选择No上图是选择这个扩展需要的一些页面或者脚本Options Page：表示需要一个配置页面Devtools Page：表示在Devtools里需要新建一个页面Content Scripts：表示需要一个与所访问的页面一起运行的脚本Omnibox：表示给浏览器地址栏增加一个功能这里我们全部选择，都来演示一下。根据提示，按a全选上图是这个扩展需要的浏览器权限，比如Cookies就是扩展可以获取到cookie数据这里为了简单就按a全选了。接下来一路回车就可以了上图可以看出yeoman为我们生成了很多项目文件并且安装了依赖四、运行扩展启动项目编译npm start可以看到项目已经编译完生成了几个文件开另外一个命令行窗口编译生成的文件在dist/chrome/目录下，可以用浏览器把这个目录加载起来打开浏览器的扩展管理页面，打开开发者模式，然后加载已解压的扩展程序，选择编译生成的dist/chrome/目录然后发现扩展显示了一个错误按钮点击进去之后提示’input’ is not allowed for specified platform.，这个是因为我们之前选择权限的时候选择了全部，但是input权限不支持，我们需要删掉这个权限（或者也可以在选择权限的时候不勾选input）。打开app/manifest.json文件，把这一行删掉然后重新加载一下扩展，错误按钮就不见了可以看到扩展已经成功运行起来了五、进行开发项目主要文件在app/目录下面，一般只要修改这里面的文件就够了六、打包npm run build运行完上面的命令之后，会在packages/目录下生成zip包七、附录《Chrome扩展及应用开发》【干货】Chrome插件(扩展)开发全攻略

由于SuperNode超级节点社区建立在EOS之上，我们希望引导我们的社区成员设置EOS钱包和帐户，以便充分参与我们的生态系统。虽然设置过程可能不如其他区块链系统那么简单，但不要担心。本指南旨在帮助你在10分钟内逐步设置EOS钱包和帐户。本指南分为三个部分：使用Scatter设置EOS钱包以生成EOS公钥和私钥。将EOS公钥分配给EOS帐户。使用Scatter钱包配置EOS帐户。完成所有这些步骤后，你将成功设置EOS帐户，该帐户支持资金转帐，投票和接收基于EOS的代币（例如SNCT）等功能。第1部分：使用Scatter设置EOS钱包市场上有几个EOS钱包，但为了这个演示，我们将使用Scatter，因为它易于使用并被EOS社区广泛采用。Scatter是Google Chrome扩展程序，因此如果你目前没有使用Chrome浏览器，则需要下载Chrome。转到Google Chrome扩展程序的Scatter页面，然后点击添加到chrome即“Add to Chrome”2.单击Google Chrome右上角的Scatter徽标3.设置你选择的密码并单击新建一个账号即“create new Scatter”4.记下助记符并将所有12个单词保存在安全的位置5.单击跳过基本设置即“Skip Basic Setup”6.点击密钥对即“Key Pairs”7.单击新建“New”8.按照以下步骤生成密钥对：1).输入你喜欢的名字。2).单击生成密钥对即“Generate Key Pair”。完成此步骤后，将显示公钥和私钥。3).单击复制“Copy”并将两个密钥保存在安全位置。4).点击保存“Save”。9.钥匙对是激活的10.重复步骤7-9以创建另一个密钥对可以使用与不同权限对应的不同密钥配置EOS帐户。在EOS中，所有者和活动权限是每个帐户的标准权限。因此，在此步骤中，我们将为活动权限创建另外一个密钥对。重复步骤7-9后，你应该能够看到以下内容：第2部分：将你的EOS公共密钥分配给EOS帐户从Scatter获取公钥后，下一步是设置EOS帐户。有两种推荐方式：1.)询问拥有现有EOS帐户的朋友为你创建一个帐户。2.)使用EOS帐户生成工具。在本指南中，我们将向你展示如何使用第二个选项创建EOS帐户。我们建议使用EOS帐户创建器 EOS Account Creator，它简单明了，并支持多种付款方式。要设置帐户，需要4KB的RAM。在安装过程中，你需要在EOS中支付一小笔一次性费用。但是，与以太网每笔交易都需要付费不同的是，因此在设置帐户后，EOS不会产生后续交易费用。1.转到EOS帐户创建器，然后单击开始使用即“Get Started”。2.选择一个帐户名称获取你的EOS帐户名称时应遵守以下要求：1.)正好包含12个字符。2.)小写字符。3.)数字到5。3.提供所有者和活动公钥注意：EOS帐户设置只需要公钥。切勿将你的私钥发送给任何人。4.支付EOS Account Creator是一个方便的工具，支持所有流行的支付选项。其中，从交易账户使用EOS自然是最便宜的选择。5.按照这些说明结算付款如果你使用EOS结算付款，则支付RAM和投注后的剩余余额将记入你的帐户。6.你应该在付款完成后不到一分钟内看到确认7.转到EOS Block Explorer检查你的帐户状态由于我们使用工具来帮助创建帐户，因此检查准确性非常重要。最好的方法是直接通过EOS Block Explorer查看EOS区块链。1.)转到EOS Block Explorer并输入你的EOS帐户名称2.)检查您的余额和帐户状态3.)向下滚动并单击帐户权限即“Account Permissions”。仔细检查公钥是否正确。第3部分：使用Scatter钱包配置EOS帐户创建EOS帐户并检查区块链资源管理器后，你可以使用钱包配置EOS帐户。1.打开Scatter并点击“Identities”2.点击修改即“Edit”3.在帐户即“Account”下，选择你的有效密钥对4.单击导入即“Import”5.选择“your_eos_account_name @ active”，然后单击“使用所选帐户”6.点击保存即“Save”7.单击圆圈以检查帐户中的EOS余额恭喜！如果你已经到这里，那么你的帐户现已成功配置，你可以在适当的时候使用EOS执行大多数功能并接收SNCT之类的代币了。了解有关SuperNode社区项目的更多信息，该项目被选为2018年第四季度顶级区块链项目之一 ：https://www.snct.io/分享一个EOS区块链相关的交互式在线编程实战教程：EOS教程，本课程帮助你快速入门EOS区块链去中心化应用的开发，内容涵盖EOS工具链、账户与钱包、发行代币、智能合约开发与部署、使用代码与智能合约交互等核心知识点，最后综合运用各知识点完成一个便签DApp的开发。汇智网原创翻译，转载请标明出处。这里是原文如何在10分钟内设置EOS钱包和帐户：分步指南