精华内容
下载资源
问答
  • chrome插件
    千次阅读
    2021-10-24 21:44:25


    这里包括下文讨论到的chrome插件其实是官方所指的chrome extension,考虑到目前主流的叫法皆以chrome插件代称

    chrome插件能干什么

    引用官网的话:

    扩展程序是可以定制浏览体验的小型软件程序。它使用户可以根据个人需要或偏好来定制 Chrome 功能和行为。它们是基于 Web 技术(例如 HTML,JavaScript 和 CSS)构建的。 扩展由相互联系的各种组件组成,组件可以包括后台脚本,内容脚本,选项页,UI 元素和各种逻辑文件。

    • 书签控制
    • 下载控制
    • 窗口控制
    • 标签控制
    • 网络请求控制,各类事件监听
    • 自定义原生菜单
    • 完善的通信机制

    我们常见的包括很多网页比价工具、取色器、掘金默认标签页,甚至是redux开发调试工具,json浏览器工具等都是通过chrome插件实现的

    感兴趣的可以去chrome官方应用商店看看:https://chrome.google.com/webstore/category/extensions

    chrome插件的版本

    注意chrome插件也是有官方版本的,不同版本之间对chrome浏览器的支持也不一样

    考虑到兼容性这里的教程采用v2版本进行开发和展示

    chrome插件的浏览器支持

    首先,毋庸置疑的是chrome浏览器对chrome插件的支持肯定是最好的

    其次,webkit内核的浏览器(国内360浏览器,搜狗浏览器等)一般来说也是可以运行的

    最后,firefox浏览器目前也对chrome插件提供了一定的支持

    也就是说,无论考虑浏览器支持还是网上资料以及开发难度上,chrome插件都是在人力有限情况下的首选方案~

    chrome插件的功能组成

    chrome插件是有好几个组件组成的,各个组件的用途以及后续开发调试方式也会有些许差异,这里各位先了解一下~

    manifest.json

    该文件是chrome插件的配置文件,目的是告诉加载插件的浏览器各个资源文件去哪里取,插件配置信息等等

    这个是每个chrome插件必不可少的组成部分

    popup

    独立的弹出页面,就是浏览器右上角一排插件图标点击之后所弹出的页面就是popup

    该页面由相对独立的html,css和js组成

    这一部分的开发方式也是和传统前端项目最为接近

    image

    content script

    这部分通常是一段JS脚本,目的通常是获取/修改目标页面的DOM,例如你想在目标网页添加一些组件UI都需要借助该脚本实现

    注意该脚本和页面脚本的JS是隔离的,无法直接访问,你没有办法直接拿到目标页面的某些变量来使用(下文会介绍一些其他方法来进行通信)

    但是CSS不是隔离的,所以相同命名的CSS会存在污染的情况,通常需要保证此脚本内部CSS命名的唯一性

    background script

    这一段是运行在浏览器后台的脚本,一般会将需要一直运行的代码放在这里

    他的API权限很高,能访问很多chromeAPI,同时不受跨域限制

    chrome插件的展现形式

    最后针对chrome插件再介绍一下其存在的一些形态,通常都会在manifest.json文件中进行定义

    browserAction(浏览器右上角)

    "browser_action":
    {
    	"default_icon": "img/icon.png",
    	"default_title": "这是Chrome插件",
    	"default_popup": "popup.html"
    }
    

    这样配置之后会在浏览器右上角增加一个插件图标,这也是使用较多的展现形式

    pageAction(浏览器右上角)

    // manifest.json
    {
    	"page_action":
    	{
    		"default_icon": "img/icon.png",
    		"default_title": "我是pageAction",
    		"default_popup": "popup.html"
    	},
    	"permissions": ["declarativeContent"]
    }
    
    // background.js
    chrome.runtime.onInstalled.addListener(function(){
    	chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
    		chrome.declarativeContent.onPageChanged.addRules([
    			{
    				conditions: [
    					// 只有打开百度才显示pageAction
    					new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})
    				],
    				actions: [new chrome.declarativeContent.ShowPageAction()]
    			}
    		]);
    	});
    });
    

    整体上和browserAction一致,但是pageAction可以在background-script中定义符合条件的网页,只有在特定情况下来才会enable我们的插件

    右键菜单

    // manifest.json
    {"permissions": ["contextMenus"]}
    
    // background.js
    chrome.contextMenus.create({
    	type: 'normal', // 类型,可选:["normal", "checkbox", "radio", "separator"],默认 normal
    	title: '菜单的名字', // 显示的文字,除非为“separator”类型否则此参数必需,如果类型为“selection”,可以使用%s显示选定的文本
    	contexts: ['page'], // 上下文环境,可选:["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"],默认page
    	onclick: function(){}, // 单击时触发的方法
    	parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单
    	documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些页面显示此右键菜单
    });
    // 删除某一个菜单项
    chrome.contextMenus.remove(menuItemId);
    // 删除所有自定义右键菜单
    chrome.contextMenus.removeAll();
    // 更新某一个菜单项
    chrome.contextMenus.update(menuItemId, updateProperties);
    

    chrome插件也可以自定义右键菜单,当用户单机鼠标右键时机会弹出插件菜单进行功能的触发

    image

    override(覆盖特定页面)

    "chrome_url_overrides":
    {
    	"newtab": "newtab.html",
    	"history": "history.html",
    	"bookmarks": "bookmarks.html"
    }
    

    用于将chrome默认提供的页面替换掉,例如新标签页,书签等等

    掘金的标签页导航就是基于此能力

    devtools(开发者工具)

    {
    	// 只能指向一个HTML文件,不能是JS文件
    	"devtools_page": "devtools.html"
    }
    
    // devtools.html
    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
    	<script type="text/javascript" src="js/devtools.js"></script>
    </body>
    </html>
    
    // devtools.js
    
    // 创建自定义面板,同一个插件可以创建多个自定义面板
    // 几个参数依次为:panel标题、图标(其实设置了也没地方显示)、要加载的页面、加载成功后的回调
    chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
    {
    	console.log('自定义面板创建成功!'); // 注意这个log一般看不到
    });
    
    // 创建自定义侧边栏
    chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar)
    {
    	// sidebar.setPage('../sidebar.html'); // 指定加载某个页面
    	sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通过表达式来指定
    	//sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接设置显示某个对象
    });
    

    我们常用的react或者vue控制条调试工具就是这种类型的插件,允许你在控制台中自定义自己的侧边栏以及其中的内容

    devtool页面可以访问一组专属API,可以以获取页面的审查窗口信息以及网络请求等信息

    回顾总结

    • 了解chrome插件是什么
    • chrome插件的用途
    • chrome插件的核心组成
    • chrome插件的展现形式
    更多相关内容
  • chrome插件XSwitch chrome插件XSwitch
  • Chrome插件-Talend API Tester 适用于后端开发人员,开发自测后端接口API,功能类似Postman
  • 插件是基于谷歌浏览器的,方便打开页面过多进行页面切换、多屏幕切换
  • Chrome插件开发.pdf

    2021-09-30 16:29:52
    Chrome插件开发.pdf
  • Chrome插件伴侣3.2

    2020-02-14 11:16:50
    Chrome插件伴侣,3.2版本,是一款chrome插件安装工具,本工具可以帮助用户,使用无损,非破坏性插件的方式,离线安装Chrome插件
  • blog文所用源码打包下载地址,使用方式请参考:https://blog.csdn.net/zengraoli/article/details/104085859
  • Web Scraper 爬虫 网页抓取 Chrome插件,可以在chrome中选择离线安装。 点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择工具选项,然后点击扩展程序来启动Chrome浏览器的扩展管理器页面。 在打开的谷歌浏览...
  • 京东抢购抢茅台脚本 Chrome插件 google浏览器插件
  • chrome插件

    2016-11-11 17:09:55
    chrome插件
  • 很好用的chrome 插件合集,不要错过--chrome插件合集.rar
  • chrome插件开发-页面对象注入及本地通信 代码包含了应用页面内的js对象注入,js对象与backgroud.js的通信以及backgroud.js与本地程序的通信
  • selenium ide的chrome插件chrome和firfox的webdriver插件,具体使用和问题查看我博客文章
  • 可以修改chrome插件白名单, 使用被停用的插件
  • Chrome 插件伴侣 是一款可以让你不通过 Chrome 应用商店,直接安装 Chrome 扩展的 Windows应用。 Chrome 目前并不支持传统的拖拽方式安装扩展,是为了安全。而在 67 版本之前是可以随意安装的。 于是安装 Chrome...
  • 谷歌浏览器的RP产品原型浏览插件, 内附Axure-RP-Extension-for-Chrome_v0.6.3插件压缩包, 以及插件安装的详细文档, 已有多位用户根据文档安装使用,安全可靠,方便简介
  • chrome插件-190612.7z

    2021-01-31 16:48:57
    chrome插件-190612.7z
  • 想探索一下chrome 插件的同学多看看查阅一下,共享方便大家
  • Chrome插件伴侣.zip

    2020-05-13 10:50:55
    本资源为Chrome插件伴侣,主要功能就是将CRX格式文件转化为谷歌浏览器可直接离线加载的文件。针对高版本Chrome浏览器无法在线加载扩展插件的问题,该工具可大大方便谷歌扩展插件的离线安装,欢迎大家下载!
  • 插件下载 博文链接:https://newday.iteye.com/blog/2220654
  • AxureRP-extension-for-Chrome-0.6.2 ...因为众所周知的原因,此插件不能正常下载,但是可以通过离线安装 使用说明: 1 设置---更多工具--扩展程序 2 打开开发者模式 3 加载已解压的扩展程序 希望能帮到你!
  • Axure RP Extension for Chrome是原型设计工具Axure RP的Chrome浏览器插件。目前版本为0.6.2。 因为在线安装需要访问Google Chrome在线商店,有时候会访问不了。所以提供一个离线版本进行安装。 安装方法: 1、打开...
  • Chrome插件伴侣

    2018-09-06 19:09:59
    Chrome版本大于47之后,外部的插件拖拽,安装不了,此插件可以解决外部插件安装
  • 如意淘 for Chrome插件

    2014-11-29 21:01:26
    如意淘:同款比价,价格曲线,降价提醒,自动比较同款商品在淘宝、天猫、京东等的价格,显示最近3个月的价格曲线,将商品添加到“想买”即可开通降价提醒。如意淘,淘我如意的!
  • chrome 插件 downFaster

    2018-01-06 15:33:01
    找了好久的chrome插件-downFaster extension crx CRX 大家一起共享吧!!
  • chrome插件Postman_v5.2.0.crxchrome插件Postman_v5.2.0.crx
  • chrome 插件开发入门

    千次阅读 2021-07-13 14:20:55
    1.什么是Chrome插件 在我们的日常开发过程中,我们会在浏览器上安装很多有利于我们开发或者说更方便于使用chrome浏览器的插件,那么到底什么是chrome插件呢? 其实Chrome插件就是一个用Web技术开发、用来增强...

    1.什么是Chrome插件

          在我们的日常开发过程中,我们会在浏览器上安装很多有利于我们开发或者说更方便于使用chrome浏览器的插件,那么到底什么是chrome插件呢? 其实Chrome插件就是一个用Web技术开发、用来增强浏览器功能的扩展程序,所以也许‘chrome扩展’比‘chrome插件’更贴切于它的意义。

     2. 开发初体验

        1.本地创建一个文件及:test

        2.在test文件夹中,创建manifest.json。任何插件都必须要有这个文件,用来描述插件的配置信息

        

    {
        "name": "test",
        "description" : "this is test",
        "version": "0.0.1",
        "manifest_version": 2,
      }

    定义当前插件名,描述信息,以及版本号等

      3.给插件加一个浏览器右上角的icon

         这里可以自定义图标图片

        

    {
         "name": "Hello Extensions",
        "description" : "Hello world Extension",
        "version": "1.0",
        "manifest_version": 2,
    
         "browser_action":
          {
          "default_icon": "./icons/16.png",
          "default_title": "这是一个示例Chrome插件",
          "default_popup": "index.html"
          }
    }

    并且还可以给它一个点击之后默认的弹出内容,如index.html中

     然后我们就可以简单的来测试下我们刚刚写的小demo了

    打开我们的chrome插件扩展,将我们写的test文件夹直接拖进来,然后你会发现在你的扩展器内多了一个名叫test的插件,如图: 

     

      这个时候,我们可以把该插件固定在我们浏览器的右上角,点击的时候会发现,弹框中的内容就是我们刚刚index中的写的内容哦,样式可以自行修改的。

     

    3.核心配置的介绍

       1.manifest.json

          这是一个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": ["js/background.js"]
     },
     // 浏览器右上角图标设置,browser_action、page_action、app必须三选一
     "browser_action": 
     {
     "default_icon": "img/icon.png",
     // 图标悬停时的标题,可选
     "default_title": "这是一个示例Chrome插件",
     "default_popup": "popup.html"
     },
     // 当某些特定页面打开才显示的图标
     /*"page_action":
     {
     "default_icon": "img/icon.png",
     "default_title": "我是pageAction",
     "default_popup": "popup.html"
     },*/
     // 需要直接注入页面的JS
     "content_scripts": 
     [
     {
     //"matches": ["http://*/*", "https://*/*"],
     // "<all_urls>" 表示匹配所有地址
     "matches": ["<all_urls>"],
     // 多个JS按顺序注入
     "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
     // JS的注入可以随便一点,但是CSS的注意就要千万小心了,因为一不小心就可能影响全局样式
     "css": ["css/custom.css"],
     // 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
     "run_at": "document_start"
     },
     // 这里仅仅是为了演示content-script可以配置多个规则
     {
     "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
     "js": ["js/show-image-content-size.js"]
     }
     ],
     // 权限申请
     "permissions":
     [
     "contextMenus", // 右键菜单
     "tabs", // 标签
     "notifications", // 通知
     "webRequest", // web请求
     "webRequestBlocking",
     "storage", // 插件本地存储
     "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
     "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
     ],
     // 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的
     "web_accessible_resources": ["js/inject.js"],
     // 插件主页,这个很重要,不要浪费了这个免费广告位
     "homepage_url": "https://www.baidu.com",
     // 覆盖浏览器默认页面
     "chrome_url_overrides":
     {
     // 覆盖浏览器默认的新标签页
     "newtab": "newtab.html"
     },
     // Chrome40以前的插件配置页写法
     "options_page": "options.html",
     // Chrome40以后的插件配置页写法,如果2个都写,新版Chrome只认后面这一个
     "options_ui":
     {
     "page": "options.html",
     // 添加一些默认的样式,推荐使用
     "chrome_style": true
     },
     // 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
     "omnibox": { "keyword" : "go" },
     // 默认语言
     "default_locale": "zh_CN",
     // devtools页面入口,注意只能指向一个HTML文件,不能是JS文件
     "devtools_page": "devtools.html"
    }

    2. content-scripts

    需要直接注入页面的文件,借助content-scripts我们可以实现通过配置的方式向指定的页面中注入JS和CSS

    {
     // 需要直接注入页面的JS
     "content_scripts": 
     [
     {
     //"matches": ["http://*/*", "https://*/*"],
     "matches": ["<all_urls>"],// 表示匹配所有地址
     // 多个JS按顺序注入
     "js": ["js/xxx.js", "js/xx.js"],
     // CSS要注意顺序,因为一不小心就可能影响全局样式
     "css": ["css/xx.css"],
     // 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
     "run_at": "document_start"
     }
     ],
    }

    3. background

      是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

      配置中,background可以通过page指定一张网页,也可以通过scripts直接指定一个JS,Chrome会自动为这个JS生成一个默认的网页:

    {
     // 会一直常驻的后台JS或后台页面
     "background":
     {
     // 如果指定JS,那么会自动生成一个背景页
     "page": "background.html"
     //"scripts": ["js/background.js"]
     },
    }

    4. chrome的展示形式

       这里给大家介绍几种较为常见的展示形式

         1.浏览器右上角

               通过配置browser_action可以在浏览器的右上角增加一个图标,我们上面的小demo已经使用了,所以就不做详细说明了

         2. 右键菜单

              通过开发Chrome插件可以自定义浏览器的右键菜单,主要是通过chrome.contextMenusAPI实现

           

     

    // manifest.json
    {
    "permissions": ["contextMenus", "tabs"],
    "background":{
          "scripts": ["js/background.js"]
          }
    }
    // background.js
    chrome.contextMenus.create({
     title: '使用度娘搜索:%s', // %s表示选中的文字
     contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单
     onclick: function(params)
     {
     // 注意不能使用location.href,因为location是属于background的window对象
     chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
     }
    });

       
      3.devtools(开发者工具)

       我们应该在开发的过程中都用过这样的插件

     

     我们自己的插件其实也是可以插入到这个位置的,具体做法如下

     在manifest.json中:

    {
     // 只能指向一个HTML文件,不能是JS文件
     "devtools_page": "devtools.html"
    }

       新建文件devtools.html

    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
     <script type="text/javascript" src="js/devtools.js"></script>
    </body>
    </html>

     新建devtools.js

    //MyTest 插件名,index.html 插件展示的内容
    chrome.devtools.panels.create('MyTest', 'icons/crm.png', 'index.html', function(panel)
    {
     console.log('自定义面板创建成功!');
    });

    5. 获取当前窗口ID

         

    chrome.windows.getCurrent(function(currentWindow)
    {
     console.log('当前窗口ID:' + currentWindow.id);
    });

    6.获取当前选项卡id

     

    // 获取当前选项卡ID
    function getCurrentTabId(callback)
    {
     chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
     {
     if(callback) callback(tabs.length ? tabs[0].id: null);
     });
    }

    7.本地存储

    我们在开发中使用的本地存储一般都是sessionStorage或者localStorage等,在chrome的插件开发中,比较建议使用chrome.storage,理由如下:

    • chrome.storage是针对插件全局的,即使你在background中保存的数据,在content-script也能获取到
    • chrome.storage.sync可以跟随当前登录用户自动同步,这台电脑修改的设置会自动同步到其它电脑,很方便,如果没有登录或者未联网则先保存到本地,可以等登录了再同步至网络
    // 读取数据,第一个参数是指定要读取的key以及设置默认值
    chrome.storage.sync.get({color: 'red', age: 18}, function(items) {
     console.log(items.color, items.age);
    });
    // 保存数据
    chrome.storage.sync.set({color: 'blue'}, function() {
     console.log('保存成功!');
    });

    以上就是此次分享的全部内容了,本次是入门级别的分享,仅仅用于了解chrome的开发,以及熟悉一些配置项。想要深入开发,还是需要参照官方文档哦~

    本文参考了: https://www.bookstack.cn/read/chrome-plugin-develop/spilt.2.spilt.7.8bdb1aac68bbdc44.md

    参考的文档写的特别细致,里面有很多东西本文没有涉及到,比如通信,动态注入等等,感兴趣的话,可以自行查看哈

    展开全文
  • Zotero 4.0.21 Chrome插件

    2015-01-03 19:13:51
    Zotero的Chrome插件下载越来越难,在这里存个档,方便找
  • axure for chrome插件

    2017-10-18 14:59:20
    axure for chrome插件 亲自安装可用~~~~~为嘛要大于50个字

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 173,674
精华内容 69,469
关键字:

chrome插件

友情链接: nihe.rar