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