大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插件(两者概念稍有不同)可以清除页面广告,但是既然身为一名程序猿,尤其是FEDer,为什么不尝试一下自己写一个清除广告的扩展程序呢.其实,编写一个浏览器扩展程序十分简单,尤其是chrome扩展,可以完全使用前端技术(HTML/CSS/JS)完成一个自己编写的扩展程序.让我们一步一步,学习一下如何编写一…

大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插件(两者概念稍有不同)可以清除页面广告,但是既然身为一名程序猿,尤其是FEDer,为什么不尝试一下自己写一个清除广告的扩展程序呢.其实,编写一个浏览器扩展程序十分简单,尤其是chrome扩展,可以完全使用前端技术(HTML/CSS/JS)完成一个自己编写的扩展程序.让我们一步一步,学习一下如何编写一…

Chrome浏览器清除页面js文件缓存 Chrome浏览器清除js缓存方法虽然简单,但有些人还是不太会,有些人会去设置里面清除有时候没有用,这里写一下简单步骤,使用一次以后就会了,而且速度更快 1.打开需清缓存的页面(如:元素编辑页面),再按F12调出开发模式框 2.勾选 Network标签下 Disable cache选项 (如果之前已勾选直接下一步) 3.按F5或右键"重新加载"刷新页面内容 (刷新页面后本页面相关js缓存已清除) 4.页面重新加载完成再按F12隐藏开发模式框就ok…

本文主要内容 contextMenus的设置 打开权限 创建菜单 点击菜单 background script向content script发送消息 1. contextMenus的设置 1.1 打开权限 contextMenus同其它功能一样,都需要在permissions里指定开启,所以非常简单,在项目的manifest.json文件的permissions中加上contextMenus "permissions": [ "contextMenus" ] 这样就…

Chrome的扩展程序可以通过content scripts向页面中注入js代码,所注入的js代码能够对页面中所有的DOM对象进行操作.由于Chrome在js执行环境上对页面代码和content scripts代码进行了隔离,所以,在content scripts中,无法直接修改页面代码执行环境.不过我们还是可以通过一些技巧向页面代码执行环境中插入想要执行的js代码段,从而能够修改页面代码的执行环境. 第一种方法,通过在DOM对象上添加一个event handler,然后派发对应的event给该…

关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展程序 扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序.对于前端工程师而言,其最大的便利就是我们可以应用我们熟悉的 HTML.CSS . Javascript 等技术来制作扩展程序. 如下图所示,这些图标就是各种开发者提供的 chrome 扩展程序: 区分扩展与插件 很多人会误称扩展程…

关于 chrome 扩展的文章,很久之前也写过一篇.清除页面广告?身为前端,自己做一款简易的chrome扩展吧. 本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点. 什么是 chrome 扩展程序 扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序.对于前端工程师而言,其最大的便利就是我们可以应用我们熟悉的 HTML.CSS . Javascript 等技术来制作扩展程序. 如下图所示,这些图标就是各种开发者提供的 chrome 扩展程序: 区分扩展与插件 很多人会误称扩展程…

众所周知chrome的各类插件,扩展很丰富,也有很多经典的应用.但是谷歌经常被墙,无法访问,想要通过访问谷歌的应用市场来直接安装浏览器扩展会比较让人抓狂,好不容易无数次刷新后打开了页面,找到了想要的应用,点击安装结果等半天告诉你网络错误是否重新加载…… 现在有不少雷锋同志将谷歌的应用下载,重新打开放在国内的服务器上,供需要的朋友下载使用,我也来做为一回雷锋出一个简单的安装教程.嗯……本来就很简单. 第一步,点击扩展的下载链接,下载下来是一个crx后缀的文件,这个是无法直接点击安装也无法直接打开的…

最近工作用到xpath,直接从浏览器复制下来路径时常会出错而且长度很长,于是我想到之前用过的一款chrome插件,可以直接编写xpath语句,并实时出现解析出的结果,检验xpath语句是否编写正确.效果如下: 下面讲一下怎么安装xpath.第一种方法就是scientific上网后点击chrome扩展程序然后在应用商店下载.第二种方法就是今天要所讲的先在网上下载xpath,然后在chrom扩展程序中安装. 首先需要下载xpath,资源网上寻找即可,下载之后把扩展名为crx的文件的扩展名更改为zip…

之前介绍过CRX Extractor可以从chrome应用商店下载备份扩展程序,有读者朋友问说:如果 Google Chrome扩展程序已经从 Chrome应用商店下架,还有没有方法下载呢?通常网路上可以搜寻到下载点或是从商店备份的 .crx 档案,但使用者很难确保这些档案干净没有被“加料”,若插件已经下架,但仍安装于你的 Google Chrome 浏览器,可以试著将插件导出备份,以后就可以随时将插件功能重新安装回去.我们之前曾经介绍过MAC上如何导出已安装的chrome插件CRX文件?,今天…

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_120 就在不久之前,我们目前这个毕业班的班长那日同学和我说,他正在公司开发Chrome扩展,看起来很高大上的技术,实际开发却非常简单,这引起了我非常浓厚的兴趣,正所谓技不压身,检验自身技术的手段之一就是拥抱新事物,这一次我们尝试在半小时内开发一款Chrome扩展,因为之前我们做了一个微信小程序的在线面试题题库的项目,所以正好利用这个题库将面试题平移到Chrome扩展上面. Chrome插件其实和一个普通web应用一样都是由ht…

一.本文主要涉及相关内容: chrome.proxy pacScript browser_action popup localStroage 二.预览 (代理运行截图,图中的代理服务器有防火墙,暂不对外) 如图所示,代理配置界面通过点击browser_action按钮打开,在popup页面内进行.可以设置服务器,也可以添加删除站点.好了,开始一些简单的说明工作 三.proxy 在chrome扩展中,要使用proxy同任何一种chrome对象一样,需要在json配置中允许chrome操作,在之前的…

chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己的一些数据,而不受访问网站和域名的影响. localStorage基础 localStorage是HTML5特性,所以有些浏览器不一定支持,不过我们这里讲的是chrome扩展,所以完全不用担心这个问题.如果想在WEB页面上使用,那就要检查一下是不是支持它 可以这样的检测: if(window.loc…

chrome在一次更新之后,出于安全考虑,完全的禁止了content_script从https向http发起ajax请求,即使正常情况下也会在console里给出提示.这对于WEB来讲是好事,但对于扩展来讲就是坏事.平时可以很容易的请求数据,现在就没那么容易了.好在chrome还提供了background_script,利用content_script和background_script之前的通信来实现ajax的请求,就跳过了chrome的这一限制. content_script 从名字里就知道…

首先说明,chrome的扩展并不它的插件,网上很多说写插件,其实都是说的扩展.写扩展并不复杂,只要根据chrome提供的一系列的API进行就可以实现很多的功能.只是对API的学习是有代价的,加上国内访问chrome官网文档并不顺利.虽然360提供了一个翻译文档,而且有不少例子,但它的内容还是太少,有些问题它仍然没有涉及.所以,如果是做一个简单的应用没有什么问题,但实际的项目开发往往得不到有用的介绍和解释. 这个系列的文章将从解决一些实际的问题入手,涉及的内容大致有以下几个: 基础配置 conte…

之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序.这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流程,从而快速帮助你提高你的工作效率. 谷歌浏览器是一个功能强大的现代浏览器,许多人都喜欢使用它.在这里,我们给大家带来 Chrome 应用程序的另一个有趣的收集——专注于网页设计和开发的12款最重要的 Chrome 扩展程序. 您可能感兴趣的相关文章 Web 开发人员和设计师必读文章推荐 2012年…

适合前端开发的 Chrome 扩展有哪些?(十款) 一.总结 好的插件或者框架对程序员的意义重大. 二.适合前端开发的 Chrome 扩展有哪些?(十款) 掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握.. 对于前端开发者来说,Chrome 浏览器绝对是开发过程中不可缺少的利器:不仅仅是因为 Chrome 自带的功能强大的 devtool,更是因为 Chr…

起 最近利用闲暇时间在进行一款 chrome 扩展 V2EX-HELPER 的开发(如果巧遇 V 友欢迎试用),今天把它彻底改成了用 webpack 打包依赖的模式,不由得感概 webpack 的强大,记录一二. 古 之前的项目开发是非常传统的 chrome 扩展开发方式,代码可以猛戳 这里.截止目前,该扩展主要由三部分组成,background-scripts,content-scripts 以及 option 页面.一开始做这个扩展的时候,只是为了实现一个功能,所以就一个 backgroun…

虽然Chrome浏览器是个吃内存的怪兽,但是,它却因为启动速度.调试功能等成为了程序猿的必备浏览器!今天有时间,整理一下自己最常用的一些Chrome扩展吧: 常用网页浏览非开发类扩展: Tampermonkey 推荐指数:★★★★★ 最近发现的神器啊,哈哈,很喜欢,利用脚本比安装扩展少用内存啊!速度还快!用法也很简单--20151202更新 用法简要记录下: Greasy Fork国内油猴脚本的下载地,常用的百度网盘助手,去除贴吧列表里面的广告,CSDN去广告自动展开文章等脚本都有 当找到脚本之…

了解Chrome扩展程序开发 2018-01-11 边城到此莫若 鸡蛋君说前端 首先,我尝试来用简单几句话描述一下Chrome扩展程序: Chrome扩展主要用于对浏览器功能的增强,它强调与浏览器相结合.比如Chrome扩展可以在浏览器的工具栏和地址栏中显示图标,它可以更改用户当前浏览的网页中的内容,也可以更改浏览器代理服务器的设置等等. 0. 认识Chrome扩展程序 - 最重要的入口 manifest.json Chrome扩展是一系列文件的集合,这些文件包括HTML文件.CSS样式文件.J…

对于前端开发人员来说,目前的前端框架层出不穷,最受欢迎的莫过于所谓的前端框架三驾马车:Angular, React和Vue.在学习的过程中,肯定好奇现在的互联网公司的网站用的何种前端框架来开发的. Chrome扩展程序商店里就提供了这样一款应用:wappalyzer: 安装后,打开某个你想研究的网站,点击Chrome浏览器工具栏这个小按钮,即可召唤出Wappalyzer的页面. 下面是用这个介绍的Chrome扩展应用Wappalyzer查看到的一些互联网公司的网站的技术栈. 百度:用了SWFOb…

1.写在前面 首先感谢小茗同学的文章-[干货]Chrome插件(扩展)开发全攻略, 基于这篇入门教程和demo,我才能写出这款 基于chrome扩展的自动答题器. git地址: https://gitee.com/cifang/lighthouse_answering_machine.git 2.开发背景 去年12月,某省委组织部举办了一系列学习竞赛活动,第一期时,参加人数寥寥,在第二期时,便通过党组织渠道要求所有党员保质保量的参加. 该活动每期10天,每天有一次答题机会,每一期通过分享可获得额…

「Chrome 没插件,香味少一半」,本期我们就来一起盘点一下chrome上那些相见恨晚的扩展. 1 JSONView2 Adblock Plus3 Keylines4 彩云小译5 单词发现者6 鼠标点击特效 (๑•́ ∀ •̀๑) 1 JSONView 顾名思义,他是一款作JSON数据的可视化的插件,我们可以对比一下开启JSONView前后的差异(部分敏感数据做了处理):用JSONView前: 用JSONView后:感觉上是不是清爽了许多,层次结构,一目了然. 2 Adblock Plus 它…

微软在推出Edge浏览器之初,就把能够使用扩展(extension)作为一个重要功能.在Win10一周年更新版(1607)中,这项功能正式向广大用户推出(当然,Insider用户早就测试了一段时间了).在Build2016上,微软表明,为了简化开发者的工作,正在准备推出一款专用工具,用于将Chrome浏览器的扩展移植到Edge浏览器中. ▲商店中已有的Edge扩展  1.简介     最近,这项工具(Microsoft Edge Extension Toolkit)也面世了.这个工具还挂着一个P…

在Chrome网上应用店中查找扩展程序 2022必须拥有Chrome扩展程序 - 浏览器插件,让你上网效率翻倍 可扩展的Chrome Web浏览器比某些人认识的功能强大得多.您可以自定义浏览体验,使其更高效,更高效,更有趣. Chrome网上应用店提供的项目可以修改Chrome浏览器,适用于休闲网络用户和Chromebook用户. Chrome网上应用店将其产品分为四个基本类别. 应用 游戏 扩展 主题 浏览Chrome网上应用店中的项目时,请留意下载类型.现在我们专注于扩展. BD新标签页 2…

据说,今年9月份开始,谷歌将在Chrome浏览器中全面禁用NPAPI插件,Chrome 45以后将无法再加载NPAPI插件,并推出了一种新的机制:扩展. 其实,如果把浏览器看作一块画布的话,NPAPI插件就像挂在画布上的各种小饰品,而扩展更像拼接在画布外小拼图.无论是插件还是扩展,都是为了让这副画更符合用户的期望.下面就只准备简单介绍一下扩展和Native Message机制. 扩展安装包 一个完整的扩展包,最终会一个.crx的压缩文件包存在,使用zip的解压文件可以直接打开的. 扩展安装,共有…

Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看到,其实结构如同一般的页面,有共通之处. 一.了解Chrome扩展程序 Chrome扩展程序商店地址为:https://chrome.google.com/webstore/category/extensions?hl=zh-CN 访问Chrome浏览器中已安装的扩展:chrome://extens…

目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式 3.Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载 4.Chrome扩展开发之四——核心功能的实现思路 5.Chrome扩展开发之五——采用指数退避算法实现ajax请求的重发,全部完成时触发回调函数 如果你对GmailAssist感兴趣,可以在chrome商店中搜索“…

chrome浏览器自从去年以来逐步去掉了对浏览器插件的支持,npapi的方案马上不可用. 当务之急要选择一个替代方案,最常用的就是扩展了.扩展程序提供了一套和本地程序交互的方案——“原生消息通信” 写本地应用的工具和语言很多,比如:C#,C++,phyon 都可以,本人对delphi熟悉一点,就说说delphi怎么接收和发送消息的吧. Chrome扩展对原生消息通信有非常明确的说明 Chrome 浏览器在单独的进程中启动每一个原生消息通信宿主,并使用标准输入(stdin)与标准输出(stdout…

手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单   手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本.界面清爽.操作人性化.网络备份资料和快速的启动速度令我爱不释手,还有它拥有众多的扩展程序,相对于firefox的插件来…