Chrome浏览器插件(扩展)开发全攻略
写在前面
我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行。
另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕。
本文目录:
demo部分截图:
前言
2.1. 什么是Chrome插件
严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension
),真正意义上的Chrome插件是更底层的浏览器功能扩展,可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯,本文也全部采用这种叫法,但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。
Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.
个人猜测crx
可能是Chrome Extension
如下3个字母的简写:
另外,其实不只是前端技术,Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(NPAPI),比如全屏幕截图。
由于安全原因,Chrome浏览器42以上版本已经陆续不再支持NPAPI插件,取而代之的是更安全的PPAPI。
2.2. 学习Chrome插件开发有什么意义
增强浏览器功能,轻松实现属于自己的“定制版”浏览器,等等。
Chrome插件提供了很多实用API供我们使用,包括但不限于:
- 书签控制;
- 下载控制;
- 窗口控制;
- 标签控制;
- 网络请求控制,各类事件监听;
- 自定义原生菜单;
- 完善的通信机制;
- 等等;
2.3. 为什么是Chrome插件而不是Firefox插件
- Chrome占有率更高,更多人用;
- 开发更简单;
- 应用场景更广泛,Firefox插件只能运行在Firefox上,而Chrome除了Chrome浏览器之外,还可以运行在所有webkit内核的国产浏览器,比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等;
- 除此之外,Firefox浏览器也对Chrome插件的运行提供了一定的支持;
开发与调试
Chrome插件没有严格的项目结构要求,只要保证本目录有一个manifest.json
即可,也不需要专门的IDE,普通的web开发工具即可。
从右上角菜单->更多工具->扩展程序可以进入 插件管理页面,也可以直接在地址栏输入 chrome://extensions 访问。
勾选开发者模式
即可以文件夹的形式直接加载插件,否则只能安装.crx
格式的文件。Chrome要求插件必须从它的Chrome应用商店安装,其它任何网站下载的都无法直接安装,所以,其实我们可以把crx
文件解压,然后通过开发者模式直接加载。
开发中,代码有任何改动都必须重新加载插件,只需要在插件管理页按下Ctrl+R
即可,以防万一最好还把页面刷新一下。
核心介绍
4.1. manifest.json
这是一个Chrome插件最重要也是必不可少的文件,用来配置所有和插件相关的配置,必须放在根目录。其中,manifest_version
、name
、version
3个是必不可少的,description
和icons
是推荐的。
下面给出的是一些常见的配置项,均有中文注释,完整的配置文档请戳这里。
{// 清单文件的版本,这个必须写,而且必须是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"
}
4.2. content-scripts
所谓content-scripts,其实就是Chrome插件中向页面注入脚本的一种形式(虽然名为script,其实还可以包括css的),借助content-scripts
我们可以实现通过配置的方式轻松向指定页面注入JS和CSS(如果需要动态注入,可以参考下文),最常见的比如:广告屏蔽、页面CSS定制,等等。
示例配置:
{// 需要直接注入页面的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"}],
}
特别注意,如果没有主动指定run_at
为document_start
(默认为document_idle
),下面这种代码是不会生效的:
document.addEventListener('DOMContentLoaded', function()
{console.log('我被执行了!');
});
content-scripts
和原始页面共享DOM,但是不共享JS,如要访问页面JS(例如某个JS变量),只能通过injected js
来实现。content-scripts
不能访问绝大部分chrome.xxx.api
,除了下面这4种:
- chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
- chrome.i18n
- chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
- chrome.storage
其实看到这里不要悲观,这些API绝大部分时候都够用了,非要调用其它API的话,你还可以通过通信来实现让background来帮你调用(关于通信,后文有详细介绍)。
好了,Chrome插件给我们提供了这么强大的JS注入功能,剩下的就是发挥你的想象力去玩弄浏览器了。
4.3. background
后台(姑且这么翻译吧),是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
background的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS
。
经过测试,其实不止是background,所有的直接通过
chrome-extension://id/xx.html
这种方式打开的网页都可以无限制跨域。
配置中,background
可以通过page
指定一张网页,也可以通过scripts
直接指定一个JS,Chrome会自动为这个JS生成一个默认的网页:
{// 会一直常驻的后台JS或后台页面"background":{// 2种指定方式,如果指定JS,那么会自动生成一个背景页"page": "background.html"//"scripts": ["js/background.js"]},
}
需要特别说明的是,虽然你可以通过chrome-extension://xxx/background.html
直接打开后台页,但是你打开的后台页和真正一直在后台运行的那个页面不是同一个,换句话说,你可以打开无数个background.html
,但是真正在后台常驻的只有一个,而且这个你永远看不到它的界面,只能调试它的代码。
4.4. event-pages
这里顺带介绍一下event-pages,它是一个什么东西呢?鉴于background生命周期太长,长时间挂载后台可能会影响性能,所以Google又弄一个event-pages
,在配置文件上,它与background的唯一区别就是多了一个persistent
参数:
{"background":{"scripts": ["event-page.js"],"persistent": false},
}
它的生命周期是:在被需要时加载,在空闲时被关闭,什么叫被需要时呢?比如第一次安装、插件更新、有content-script向它发送消息,等等。
除了配置文件的变化,代码上也有一些细微变化,个人这个简单了解一下就行了,一般情况下background也不会很消耗性能的。
4.5. popup
popup
是点击browser_action
或者page_action
图标时打开的一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性的交互。
popup
可以包含任意你想要的HTML内容,并且会自适应大小。可以通过default_popup
字段来指定popup页面,也可以调用setPopup()
方法。
配置方式:
{"browser_action":{"default_icon": "img/icon.png",// 图标悬停时的标题,可选"default_title": "这是一个示例Chrome插件","default_popup": "popup.html"}
}
需要特别注意的是,由于单击图标打开popup,焦点离开又立即关闭,所以popup页面的生命周期一般很短,需要长时间运行的代码千万不要写在popup里面。
在权限上,它和background非常类似,它们之间最大的不同是生命周期的不同,popup中可以直接通过chrome.extension.getBackgroundPage()
获取background的window对象。
4.6. injected-script
这里的injected-script
是我给它取的,指的是通过DOM操作的方式向页面注入的一种JS。为什么要把这种JS单独拿出来讨论呢?又或者说为什么需要通过这种方式注入JS呢?
这是因为content-script
有一个很大的“缺陷”,也就是无法访问页面中的JS,虽然它可以操作DOM,但是DOM却不能调用它,也就是无法在DOM中通过绑定事件的方式调用content-script
中的代码(包括直接写onclick
和addEventListener
2种方式都不行),但是,“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求,那该怎么办呢?其实这就是本小节要讲的。
在content-script
中通过DOM方式向页面注入inject-script
代码示例:
// 向页面注入JS
function injectCustomJs(jsPath)
{jsPath = jsPath || 'js/inject.js';var temp = document.createElement('script');temp.setAttribute('type', 'text/javascript');// 获得的地址类似:chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.jstemp.src = chrome.extension.getURL(jsPath);temp.onload = function(){// 放在页面不好看,执行完后移除掉this.parentNode.removeChild(this);};document.head.appendChild(temp);
}
你以为这样就行了?执行一下你会看到如下报错:
Denying load of chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
意思就是你想要在web中直接访问插件中的资源的话必须显示声明才行,配置文件中增加如下:
{// 普通页面能够直接访问的插件资源列表,如果不设置是无法直接访问的"web_accessible_resources": ["js/inject.js"],
}
至于inject-script
如何调用content-script
中的代码,后面我会在专门的一个消息通信章节详细介绍。
4.7. homepage_url
开发者或者插件主页设置,一般会在如下2个地方显示:
Chrome插件的8种展示形式
5.1. browserAction(浏览器右上角)
通过配置browser_action
可以在浏览器的右上角增加一个图标,一个browser_action
可以拥有一个图标,一个tooltip
,一个badge
和一个popup
。
示例配置如下:
"browser_action":
{"default_icon": "img/icon.png","default_title": "这是一个示例Chrome插件","default_popup": "popup.html"
}
5.1.1. 图标
browser_action
图标推荐使用宽高都为19像素的图片,更大的图标会被缩小,格式随意,一般推荐png,可以通过manifest中default_icon
字段配置,也可以调用setIcon()方法。
5.1.2. tooltip
修改browser_action
的manifest中default_title
字段,或者调用setTitle()
方法。
5.1.3. badge
所谓badge
就是在图标上显示一些文本,可以用来更新一些小的扩展状态提示信息。因为badge空间有限,所以只支持4个以下的字符(英文4个,中文2个)。badge无法通过配置文件来指定,必须通过代码实现,设置badge文字和颜色可以分别使用setBadgeText()
和setBadgeBackgroundColor()
。
chrome.browserAction.setBadgeText({text: 'new'});
chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});
效果:
5.2. pageAction(地址栏右侧)
所谓pageAction
,指的是只有当某些特定页面打开才显示的图标,它和browserAction
最大的区别是一个始终都显示,一个只在特定情况才显示。
需要特别说明的是早些版本的Chrome是将pageAction放在地址栏的最右边,左键单击弹出popup,右键单击则弹出相关默认的选项菜单:
而新版的Chrome更改了这一策略,pageAction和普通的browserAction一样也是放在浏览器右上角,只不过没有点亮时是灰色的,点亮了才是彩色的,灰色时无论左键还是右键单击都是弹出选项:
具体是从哪一版本开始改的没去仔细考究,反正知道v50.0的时候还是前者,v58.0的时候已改为后者。
调整之后的pageAction
我们可以简单地把它看成是可以置灰的browserAction
。
- chrome.pageAction.show(tabId) 显示图标;
- chrome.pageAction.hide(tabId) 隐藏图标;
示例(只有打开百度才显示图标):
// 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: [// 只有打开百度才显示pageActionnew chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})],actions: [new chrome.declarativeContent.ShowPageAction()]}]);});
});
效果图:
5.3. 右键菜单
通过开发Chrome插件可以自定义浏览器的右键菜单,主要是通过chrome.contextMenus
API实现,右键菜单可以出现在不同的上下文,比如普通页面、选中的文字、图片、链接,等等,如果有同一个插件里面定义了多个菜单,Chrome会自动组合放到以插件名字命名的二级菜单里,如下:
5.3.1. 最简单的右键菜单示例
// manifest.json
{"permissions": ["contextMenus"]}// background.js
chrome.contextMenus.create({title: "测试右键菜单",onclick: function(){alert('您点击了右键菜单!');}
});
效果:
5.3.2. 添加右键百度搜索
// manifest.json
{"permissions": ["contextMenus", "tabs"]}// 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)});}
});
效果如下:
5.3.3. 语法说明
这里只是简单列举一些常用的,完整API参见:https://developer.chrome.com/extensions/contextMenus
chrome.contextMenus.create({type: 'normal', // 类型,可选:["normal", "checkbox", "radio", "separator"],默认 normaltitle: '菜单的名字', // 显示的文字,除非为“separator”类型否则此参数必需,如果类型为“selection”,可以使用%s显示选定的文本contexts: ['page'], // 上下文环境,可选:["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"],默认pageonclick: function(){}, // 单击时触发的方法parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些页面显示此右键菜单
});
// 删除某一个菜单项
chrome.contextMenus.remove(menuItemId);
// 删除所有自定义右键菜单
chrome.contextMenus.removeAll();
// 更新某一个菜单项
chrome.contextMenus.update(menuItemId, updateProperties);
5.4. override(覆盖特定页面)
使用override
页可以将Chrome默认的一些特定页面替换掉,改为使用扩展提供的页面。
扩展可以替代如下页面:
- 历史记录:从工具菜单上点击历史记录时访问的页面,或者从地址栏直接输入 chrome://history
- 新标签页:当创建新标签的时候访问的页面,或者从地址栏直接输入 chrome://newtab
- 书签:浏览器的书签,或者直接输入 chrome://bookmarks
注意:
- 一个扩展只能替代一个页面;
- 不能替代隐身窗口的新标签页;
- 网页必须设置title,否则用户可能会看到网页的URL,造成困扰;
下面的截图是默认的新标签页和被扩展替换掉的新标签页。
代码(注意,一个插件只能替代一个默认页,以下仅为演示):
"chrome_url_overrides":
{"newtab": "newtab.html","history": "history.html","bookmarks": "bookmarks.html"
}
5.5. devtools(开发者工具)
5.5.1. 预热
使用过vue的应该见过这种类型的插件:
是的,Chrome允许插件在开发者工具(devtools)上动手脚,主要表现在:
- 自定义一个和多个和
Elements
、Console
、Sources
等同级别的面板; - 自定义侧边栏(sidebar),目前只能自定义
Elements
面板的侧边栏;
先来看2张简单的demo截图,自定义面板(判断当前页面是否使用了jQuery):
自定义侧边栏(获取当前页面所有图片):
5.5.2. devtools扩展介绍
主页:https://developer.chrome.com/extensions/devtools
来一张官方图片:
每打开一个开发者工具窗口,都会创建devtools页面的实例,F12窗口关闭,页面也随着关闭,所以devtools页面的生命周期和devtools窗口是一致的。devtools页面可以访问一组特有的DevTools API
以及有限的扩展API,这组特有的DevTools API
只有devtools页面才可以访问,background都无权访问,这些API包括:
chrome.devtools.panels
:面板相关;chrome.devtools.inspectedWindow
:获取被审查窗口的有关信息;chrome.devtools.network
:获取有关网络请求的信息;
大部分扩展API都无法直接被DevTools
页面调用,但它可以像content-script
一样直接调用chrome.extension
和chrome.runtime
API,同时它也可以像content-script
一样使用Message交互的方式与background页面进行通信。
5.5.3. 实例:创建一个devtools扩展
首先,要针对开发者工具开发插件,需要在清单文件声明如下:
{// 只能指向一个HTML文件,不能是JS文件"devtools_page": "devtools.html"
}
这个devtools.html
里面一般什么都没有,就引入一个js:
<!DOCTYPE html>
<html>
<head></head>
<body><script type="text/javascript" src="js/devtools.js"></script>
</body>
</html>
可以看出来,其实真正代码是devtools.js
,html文件是“多余”的,所以这里觉得有点坑,devtools_page
干嘛不允许直接指定JS呢?
再来看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!'}); // 直接设置显示某个对象
});
setPage时的效果:
以下截图示例的代码:
// 检测jQuery
document.getElementById('check_jquery').addEventListener('click', function()
{// 访问被检查的页面DOM需要使用inspectedWindow// 简单例子:检测被检查页面是否使用了jQuerychrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException){var html = '';if (isException) html = '当前页面没有使用jQuery。';else html = '当前页面使用了jQuery,版本为:'+result;alert(html);});
});// 打开某个资源
document.getElementById('open_resource').addEventListener('click', function()
{chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException){chrome.devtools.panels.openResource(result, 20, function(){console.log('资源打开成功!');});});
});// 审查元素
document.getElementById('test_inspect').addEventListener('click', function()
{chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){});
});// 获取所有资源
document.getElementById('get_all_resources').addEventListener('click', function()
{chrome.devtools.inspectedWindow.getResources(function(resources){alert(JSON.stringify(resources));});
});
5.5.4. 调试技巧
修改了devtools页面的代码时,需要先在 chrome://extensions 页面按下Ctrl+R
重新加载插件,然后关闭再打开开发者工具即可,无需刷新页面(而且只刷新页面不刷新开发者工具的话是不会生效的)。
由于devtools本身就是开发者工具页面,所以几乎没有方法可以直接调试它,直接用 chrome-extension://extid/devtools.html"
的方式打开页面肯定报错,因为不支持相关特殊API,只能先自己写一些方法屏蔽这些错误,调试通了再放开。
5.6. option(选项页)
所谓options
页,就是插件的设置页面,有2个入口,一个是右键图标有一个“选项”菜单,还有一个在插件管理页面:
在Chrome40以前,options页面和其它普通页面没什么区别,Chrome40以后则有了一些变化。
我们先看老版的options:
{// Chrome40以前的插件配置页写法"options_page": "options.html",
}
这个页面里面的内容就随你自己发挥了,配置之后在插件管理页就会看到一个选项
按钮入口,点进去就是打开一个网页,没啥好讲的。
效果:
再来看新版的optionsV2:
{"options_ui":{"page": "options.html",// 添加一些默认的样式,推荐使用"chrome_style": true},
}
options.html
的代码我们没有任何改动,只是配置文件改了,之后效果如下:
看起来是不是高大上了?
几点注意:
- 为了兼容,建议2种都写,如果都写了,Chrome40以后会默认读取新版的方式;
- 新版options中不能使用alert;
- 数据存储建议用chrome.storage,因为会随用户自动同步;
5.7. omnibox
omnibox
是向用户提供搜索建议的一种方式。先来看个gif
图以便了解一下这东西到底是个什么鬼:
注册某个关键字以触发插件自己的搜索建议界面,然后可以任意发挥了。
首先,配置文件如下:
{// 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字"omnibox": { "keyword" : "go" },
}
然后background.js
中注册监听事件:
// omnibox 演示
chrome.omnibox.onInputChanged.addListener((text, suggest) => {console.log('inputChanged: ' + text);if(!text) return;if(text == '美女') {suggest([{content: '中国' + text, description: '你要找“中国美女”吗?'},{content: '日本' + text, description: '你要找“日本美女”吗?'},{content: '泰国' + text, description: '你要找“泰国美女或人妖”吗?'},{content: '韩国' + text, description: '你要找“韩国美女”吗?'}]);}else if(text == '微博') {suggest([{content: '新浪' + text, description: '新浪' + text},{content: '腾讯' + text, description: '腾讯' + text},{content: '搜狐' + text, description: '搜索' + text},]);}else {suggest([{content: '百度搜索 ' + text, description: '百度搜索 ' + text},{content: '谷歌搜索 ' + text, description: '谷歌搜索 ' + text},]);}
});// 当用户接收关键字建议时触发
chrome.omnibox.onInputEntered.addListener((text) => {console.log('inputEntered: ' + text);if(!text) return;var href = '';if(text.endsWith('美女')) href = 'http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + text;else if(text.startsWith('百度搜索')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('百度搜索 ', '');else if(text.startsWith('谷歌搜索')) href = 'https://www.google.com.tw/search?q=' + text.replace('谷歌搜索 ', '');else href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text;openUrlCurrentTab(href);
});
// 获取当前选项卡ID
function getCurrentTabId(callback)
{chrome.tabs.query({active: true, currentWindow: true}, function(tabs){if(callback) callback(tabs.length ? tabs[0].id: null);});
}// 当前标签打开某个链接
function openUrlCurrentTab(url)
{getCurrentTabId(tabId => {chrome.tabs.update(tabId, {url: url});})
}
5.8. 桌面通知
Chrome提供了一个chrome.notifications
API以便插件推送桌面通知,暂未找到chrome.notifications
和HTML5自带的Notification
的显著区别及优势。
在后台JS中,无论是使用chrome.notifications
还是Notification
都不需要申请权限(HTML5方式需要申请权限),直接使用即可。
最简单的通知:
代码:
chrome.notifications.create(null, {type: 'basic',iconUrl: 'img/icon.png',title: '这是标题',message: '您刚才点击了自定义右键菜单!'
});
通知的样式可以很丰富:
这个没有深入研究,有需要的可以去看官方文档。
5种类型的JS对比
Chrome插件的JS主要可以分为这5类:injected script
、content-script
、popup js
、background js
和devtools js
,
6.1. 权限对比
JS种类 | 可访问的API | DOM访问情况 | JS访问情况 | 直接跨域 |
---|---|---|---|---|
injected script | 和普通JS无任何差别,不能访问任何扩展API | 可以访问 | 可以访问 | 不可以 |
content script | 只能访问 extension、runtime等部分API | 可以访问 | 不可以 | 不可以 |
popup js | 可访问绝大部分API,除了devtools系列 | 不可直接访问 | 不可以 | 可以 |
background js | 可访问绝大部分API,除了devtools系列 | 不可直接访问 | 不可以 | 可以 |
devtools js | 只能访问 devtools、extension、runtime等部分API | 可以 | 可以 | 不可以 |
6.2. 调试方式对比
JS类型 | 调试方式 | 图片说明 |
---|---|---|
injected script | 直接普通的F12即可 | 懒得截图 |
content-script | 打开Console,如图切换 | |
popup-js | popup页面右键审查元素 | |
background | 插件管理页点击背景页即可 | |
devtools-js | 暂未找到有效方法 | - |
消息通信
通信主页:https://developer.chrome.com/extensions/messaging
前面我们介绍了Chrome插件中存在的5种JS,那么它们之间如何互相通信呢?下面先来系统概况一下,然后再分类细说。需要知道的是,popup和background其实几乎可以视为一种东西,因为它们可访问的API都一样、通信机制一样、都可以跨域。
7.1. 互相通信概览
注:-
表示不存在或者无意义,或者待验证。
injected-script | content-script | popup-js | background-js | |
---|---|---|---|---|
injected-script | - | window.postMessage | - | - |
content-script | window.postMessage | - | chrome.runtime.sendMessage chrome.runtime.connect | chrome.runtime.sendMessage chrome.runtime.connect |
popup-js | - | chrome.tabs.sendMessage chrome.tabs.connect | - | chrome.extension. getBackgroundPage() |
background-js | - | chrome.tabs.sendMessage chrome.tabs.connect | chrome.extension.getViews | - |
devtools-js | chrome.devtools. inspectedWindow.eval | - | chrome.runtime.sendMessage | chrome.runtime.sendMessage |
7.2. 通信详细介绍
7.2.1. popup和background
popup可以直接调用background中的JS方法,也可以直接访问background的DOM:
// background.js
function test()
{alert('我是background!');
}// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.test(); // 访问bg的函数
alert(bg.document.body.innerHTML); // 访问bg的DOM
小插曲,今天碰到一个情况,发现popup无法获取background的任何方法,找了半天才发现是因为background的js报错了,而你如果不主动查看background的js的话,是看不到错误信息的,特此提醒。
至于background
访问popup
如下(前提是popup
已经打开):
var views = chrome.extension.getViews({type:'popup'});
if(views.length > 0) {console.log(views[0].location.href);
}
7.2.2. popup或者bg向content主动发送消息
background.js或者popup.js:
function sendMessageToContentScript(message, callback)
{chrome.tabs.query({active: true, currentWindow: true}, function(tabs){chrome.tabs.sendMessage(tabs[0].id, message, function(response){if(callback) callback(response);});});
}
sendMessageToContentScript({cmd:'test', value:'你好,我是popup!'}, function(response)
{console.log('来自content的回复:'+response);
});
content-script.js
接收:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{// console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");if(request.cmd == 'test') alert(request.value);sendResponse('我收到了你的消息!');
});
双方通信直接发送的都是JSON对象,不是JSON字符串,所以无需解析,很方便(当然也可以直接发送字符串)。
网上有些老代码中用的是
chrome.extension.onMessage
,没有完全查清二者的区别(貌似是别名),但是建议统一使用chrome.runtime.onMessage
。
7.2.3. content-script主动发消息给后台
content-script.js:
chrome.runtime.sendMessage({greeting: '你好,我是content-script呀,我主动发消息给后台!'}, function(response) {console.log('收到来自后台的回复:' + response);
});
background.js 或者 popup.js:
// 监听来自content-script的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{console.log('收到来自content-script的消息:');console.log(request, sender, sendResponse);sendResponse('我是后台,我已收到你的消息:' + JSON.stringify(request));
});
注意事项:
- content_scripts向
popup
主动发消息的前提是popup必须打开!否则需要利用background作中转; - 如果background和popup同时监听,那么它们都可以同时收到消息,但是只有一个可以sendResponse,一个先发送了,那么另外一个再发送就无效;
7.2.4. injected script和content-script
content-script
和页面内的脚本(injected-script
自然也属于页面内的脚本)之间唯一共享的东西就是页面的DOM元素,有2种方法可以实现二者通讯:
- 可以通过
window.postMessage
和window.addEventListener
来实现二者消息通讯; - 通过自定义DOM事件来实现;
第一种方法(推荐):
injected-script
中:
window.postMessage({"test": '你好!'}, '*');
content script中:
window.addEventListener("message", function(e)
{console.log(e.data);
}, false);
第二种方法:
injected-script
中:
var customEvent = document.createEvent('Event');
customEvent.initEvent('myCustomEvent', true, true);
function fireCustomEvent(data) {hiddenDiv = document.getElementById('myCustomEventDiv');hiddenDiv.innerText = datahiddenDiv.dispatchEvent(customEvent);
}
fireCustomEvent('你好,我是普通JS!');
content-script.js
中:
var hiddenDiv = document.getElementById('myCustomEventDiv');
if(!hiddenDiv) {hiddenDiv = document.createElement('div');hiddenDiv.style.display = 'none';document.body.appendChild(hiddenDiv);
}
hiddenDiv.addEventListener('myCustomEvent', function() {var eventData = document.getElementById('myCustomEventDiv').innerText;console.log('收到自定义事件消息:' + eventData);
});
7.3. 长连接和短连接
其实上面已经涉及到了,这里再单独说明一下。Chrome插件中有2种通信方式,一个是短连接(chrome.tabs.sendMessage
和chrome.runtime.sendMessage
),一个是长连接(chrome.tabs.connect
和chrome.runtime.connect
)。
短连接的话就是挤牙膏一样,我发送一下,你收到了再回复一下,如果对方不回复,你只能重新发,而长连接类似WebSocket
会一直建立连接,双方可以随时互发消息。
短连接上面已经有代码示例了,这里只讲一下长连接。
popup.js:
getCurrentTabId((tabId) => {var port = chrome.tabs.connect(tabId, {name: 'test-connect'});port.postMessage({question: '你是谁啊?'});port.onMessage.addListener(function(msg) {alert('收到消息:'+msg.answer);if(msg.answer && msg.answer.startsWith('我是')){port.postMessage({question: '哦,原来是你啊!'});}});
});
content-script.js:
// 监听长连接
chrome.runtime.onConnect.addListener(function(port) {console.log(port);if(port.name == 'test-connect') {port.onMessage.addListener(function(msg) {console.log('收到长连接消息:', msg);if(msg.question == '你是谁啊?') port.postMessage({answer: '我是你爸!'});});}
});
其它补充
8.1. 动态注入或执行JS
虽然在background
和popup
中无法直接访问页面DOM,但是可以通过chrome.tabs.executeScript
来执行脚本,从而实现访问web页面的DOM(注意,这种方式也不能直接访问页面JS)。
示例manifest.json
配置:
{"name": "动态JS注入演示",..."permissions": ["tabs", "http://*/*", "https://*/*"],...
}
JS:
// 动态执行JS代码
chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'});
// 动态执行JS文件
chrome.tabs.executeScript(tabId, {file: 'some-script.js'});
8.2. 动态注入CSS
示例manifest.json
配置:
{"name": "动态CSS注入演示",..."permissions": ["tabs", "http://*/*", "https://*/*"],...
}
JS代码:
// 动态执行CSS代码,TODO,这里有待验证
chrome.tabs.insertCSS(tabId, {code: 'xxx'});
// 动态执行CSS文件
chrome.tabs.insertCSS(tabId, {file: 'some-style.css'});
8.3. 获取当前窗口ID
chrome.windows.getCurrent(function(currentWindow)
{console.log('当前窗口ID:' + currentWindow.id);
});
8.4. 获取当前标签页ID
一般有2种方法:
// 获取当前选项卡ID
function getCurrentTabId(callback)
{chrome.tabs.query({active: true, currentWindow: true}, function(tabs){if(callback) callback(tabs.length ? tabs[0].id: null);});
}
获取当前选项卡id的另一种方法,大部分时候都类似,只有少部分时候会不一样(例如当窗口最小化时)
// 获取当前选项卡ID
function getCurrentTabId2()
{chrome.windows.getCurrent(function(currentWindow){chrome.tabs.query({active: true, windowId: currentWindow.id}, function(tabs){if(callback) callback(tabs.length ? tabs[0].id: null);});});
}
8.5. 本地存储
本地存储建议用chrome.storage
而不是普通的localStorage
,区别有好几点,个人认为最重要的2点区别是:
chrome.storage
是针对插件全局的,即使你在background
中保存的数据,在content-script
也能获取到;chrome.storage.sync
可以跟随当前登录用户自动同步,这台电脑修改的设置会自动同步到其它电脑,很方便,如果没有登录或者未联网则先保存到本地,等登录了再同步至网络;
需要声明storage
权限,有chrome.storage.sync
和chrome.storage.local
2种方式可供选择,使用示例如下:
// 读取数据,第一个参数是指定要读取的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('保存成功!');
});
8.6. webRequest
通过webRequest系列API可以对HTTP请求进行任性地修改、定制,这里通过beforeRequest
来简单演示一下它的冰山一角:
//manifest.json
{// 权限申请"permissions":["webRequest", // web请求"webRequestBlocking", // 阻塞式web请求"storage", // 插件本地存储"http://*/*", // 可以通过executeScript或者insertCSS访问的网站"https://*/*" // 可以通过executeScript或者insertCSS访问的网站],
}// background.js
// 是否显示图片
var showImage;
chrome.storage.sync.get({showImage: true}, function(items) {showImage = items.showImage;
});
// web请求监听,最后一个参数表示阻塞式,需单独声明权限:webRequestBlocking
chrome.webRequest.onBeforeRequest.addListener(details => {// cancel 表示取消本次请求if(!showImage && details.type == 'image') return {cancel: true};// 简单的音视频检测// 大部分网站视频的type并不是media,且视频做了防下载处理,所以这里仅仅是为了演示效果,无实际意义if(details.type == 'media') {chrome.notifications.create(null, {type: 'basic',iconUrl: 'img/icon.png',title: '检测到音视频',message: '音视频地址:' + details.url,});}
}, {urls: ["<all_urls>"]}, ["blocking"]);
8.7. 国际化
插件根目录新建一个名为_locales
的文件夹,再在下面新建一些语言的文件夹,如en
、zh_CN
、zh_TW
,然后再在每个文件夹放入一个messages.json
,同时必须在清单文件中设置default_locale
。
_locales\en\messages.json
内容:
{"pluginDesc": {"message": "A simple chrome extension demo"},"helloWorld": {"message": "Hello World!"}
}
_locales\zh_CN\messages.json
内容:
{"pluginDesc": {"message": "一个简单的Chrome插件demo"},"helloWorld": {"message": "你好啊,世界!"}
}
在manifest.json
和CSS
文件中通过__MSG_messagename__
引入,如:
{"description": "__MSG_pluginDesc__",// 默认语言"default_locale": "zh_CN",
}
JS中则直接chrome.i18n.getMessage("helloWorld")
。
测试时,通过给chrome建立一个不同的快捷方式chrome.exe --lang=en
来切换语言,如:
英文效果:
中文效果:
8.8. API总结
比较常用用的一些API系列:
- chrome.tabs
- chrome.runtime
- chrome.webRequest
- chrome.window
- chrome.storage
- chrome.contextMenus
- chrome.devtools
- chrome.extension
经验总结
9.1. 查看已安装插件路径
已安装的插件源码路径:C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions
,每一个插件被放在以插件ID为名的文件夹里面,想要学习某个插件的某个功能是如何实现的,看人家的源码是最好的方法了:
如何查看某个插件的ID?进入 chrome://extensions ,然后勾线开发者模式即可看到了。
9.2. 特别注意background的报错
很多时候你发现你的代码会莫名其妙的失效,找来找去又找不到原因,这时打开background的控制台才发现原来某个地方写错了导致代码没生效,正式由于background报错的隐蔽性(需要主动打开对应的控制台才能看到错误),所以特别注意这点。
9.3. 如何让popup页面不关闭
在对popup页面审查元素的时候popup会被强制打开无法关闭,只有控制台关闭了才可以关闭popup,原因很简单:如果popup关闭了控制台就没用了。这种方法在某些情况下很实用!
9.4. 不支持内联JavaScript的执行
也就是不支持将js直接写在html中,比如:
<input id="btn" type="button" value="收藏" onclick="test()"/>
报错如下:
Refused to execute inline event handler 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-...'), or a nonce ('nonce-...') is required to enable inline execution.
解决方法就是用JS绑定事件:
$('#btn').on('click', function(){alert('测试')});
另外,对于A标签,这样写href="javascript:;"
然后用JS绑定事件虽然控制台会报错,但是不受影响,当然强迫症患者受不了的话只能写成href="#"
了。
如果这样写:
<a href="javascript:;" id="get_secret">请求secret</a>
报错如下:
Refused to execute JavaScript URL 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-...'), or a nonce ('nonce-...') is required to enable inline execution.
9.5. 注入CSS的时候必须小心
由于通过content_scripts
注入的CSS优先级非常高,几乎仅次于浏览器默认样式,稍不注意可能就会影响一些网站的展示效果,所以尽量不要写一些影响全局的样式。
之所以强调这个,是因为这个带来的问题非常隐蔽,不太容易找到,可能你正在写某个网页,昨天样式还是好好的,怎么今天就突然不行了?然后你辛辛苦苦找来找去,找了半天才发现竟然是因为插件里面的一个样式影响的!
打包与发布
打包的话直接在插件管理页有一个打包按钮:
然后会生成一个.crx
文件,要发布到Google应用商店的话需要先登录你的Google账号,然后花5个$注册为开发者,本人太穷,就懒得亲自验证了,有发布需求的自己去整吧。
参考
11.1. 官方资料
推荐查看官方文档,虽然是英文,但是全且新,国内的中文资料都比较旧(注意以下全部需要翻墙):
- Chrome插件官方文档主页
- Chrome插件官方示例
- manifest清单文件
- permissions权限
- chrome.xxx.api文档
- 模糊匹配规则语法详解
11.2. 第三方资料
部分中文资料,不是特别推荐:
- 360安全浏览器开发文档
- 360极速浏览器Chrome扩展开发文档
- Chrome扩展开发极客系列博客
附图
附图:Chrome高清png格式logo:
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 阿里云短信服务快速搭建流程
0.源码地址https://github.com/tzforevere...1. 技术栈javaspringbootmavenredis 2.进入阿里云官网https://www.aliyun.com/2.1 登录=>选择进入短信服务2.2 开通服务=>进入管理控制台注:我已经开通服务,所以显示的是管理控制台## 2.3 添加模板管理选择 国内消息 - 模板…...
2024/4/29 23:29:28 - 2020信息系统项目管理师备战5--项目管理计划与执行
制定项目管理计划是管理项目必不可少的过程,它包括定义,准备,集成和协调所有子计划以形成项目管理计划所必须的所有行动。项目管理计划定义了项目如何执行,监督和,其内容将依据应用领域和项目复杂性的不同而有所差别。项目管理计划包含的主要内容如下(不包含辅助计划):…...
2024/4/24 11:34:34 - Vscode之Emmet语法简单介绍
1.Emmmet语法 Emmet语法的前身是Zen coding,它使用缩写来提高html和css的编写速度。 1.1 快速生成HTML标签生成标签:直接输入标签名,按tab建即可,eg: div 然后按tab 就可以生成<div></div>如果想生成多个相同的标签,只需在标签后面加上就可以,eg:div3,就可以…...
2024/4/24 11:34:41 - 数据结构(知识点003)
数据结构(知识点003)第二章 线性表本章主要介绍:1.什么是线性表 2.顺序表及初始化过程详解 3.顺序表以及基本操作 4.链表(链式存储结构)及创建(C语言详解版)5.链表的基本操作 6.顺序表和链表的优缺点 7.静态链表及实现 8.静态链表基本操作 9.静态链表…...
2024/5/1 10:45:09 - Latex的入门
入门的LaTeX操作:一些入门的关于{beamer}的PPT制作方法 找到了一些写的还不错的博客: Ctex PPT 版 Beamer 用Beamer制作幻灯片(卷一 基本架构篇)作者:君的名字 使用LaTeX制作PPT 还有一个小问题的解决新版的geometry 5…0宏包去掉了 compat2’选项 在一些 beamerbasecom…...
2024/4/18 11:45:39 - mac下安装Homebrew教程 碰壁的最终归宿
#mac下镜像飞速安装Homebrew教程 折腾一下午的结果 流程先走一遍 Last login: Sun Jun 7 16:51:52 on ttys000 luodemingdeMacBook-Pro:~ sevenusrbin/ruby−e“∗∗_usr_bin/ruby -e “**usrbin/ruby−e“∗∗(curl -fsSL https://raw.githubusercontent.com/Homebrew/in…...
2024/4/18 7:39:10 - 以一举三的京东数据爬取(已经分配好各个方法,修改几行代码即可应用其他网站)并以json文件保存
json的介绍 1.个人所理解的json就是一个与xml类似的数据存储文件, 而且也比xml容易写和读,跟python中字典很相似,本篇文章也是直接保存字典。 2.https://baike.baidu.com/item/JSON/2462549?fr=aladdin 此链接详细介绍了json的作用以及书写规范,反正就是很简单,一扫而过即…...
2024/5/2 4:05:09 - 牛客网——C++字符串中找出连续最长的数字串【完整分析加代码】
《 《《《 感觉不错,关注一个再走。》》》》 题目描述: 读入一个字符串str,输出字符串str中的连续最长的数字串。 输入描述: 个测试输入包含1个测试用例,一个字符串str,长度不超过255。 输出描述: 在一行内输出str中里连续最长的数字串。 示例1: 输入 abcd12345ed125ss12…...
2024/4/27 7:40:35 - JavaScript字符串方法(最全)
字符串相关方法lengthtrimconcatincludessearchindexOflastIndexOf()slicesubstringsubStrreplacesplitmatchcharAtcharCodeAtfromCharCodetoUpperCasetoLowerCasestartsWith()repeat length 此属性返回字符串的长度。 语法:string.lengthvar txt = "Hello World!"c…...
2024/4/15 5:03:05 - 参数估计的无偏性、有效性以及一致性、中心化、标准化
参数估计的无偏性、有效性以及一致性 无偏性 定义式:无偏估计是用样本统计量来估计总体参数时的一种无偏推断。估计量的数学期望等于被估计参数的真实值,则称此此估计量为被估计参数的无偏估计,即具有无偏性,是一种用于评价估计量优良性的准则。无偏估计的意义是:在多次重…...
2024/4/29 11:07:17 - 从H265文件中读取文件并封装成RTP
源码地址:https://github.com/zhouyinfei/rtsp-netty-server首先上代码:public void playH265(File f){//播放h265视频文件BufferedInputStream in = null;try {in = new BufferedInputStream(new FileInputStream(f));int buf_size = 64*1024;byte[] buffer = new byte[buf_…...
2024/5/2 7:31:58 - 【概率论与数理统计学习】第五章
一、正态分布二、随机变量函数的分布三、二元随机变量,离散型随机变量分布律...
2024/4/25 22:33:03 - CSDN 图片导入失败解决方案 | 图片标签格式转换
CSDN 导入 markdown 文件经常会出现失败的情况,之后发现将 markdown 文件中所有图片标签转换为 html 类型标签后,可以成功导入图片。 使用正则匹配完成该工作 本人当前使用的浏览器为 chrome,亲测可用,脚本已放到 Github 上 Github 地址: image-tag-transformer | Github使…...
2024/4/24 11:34:34 - 【深度之眼cs231n第七期】笔记(二十)
目录循环神经网络介绍例子截断反向传播训练结果理解RNN看图说话模型结构注意机制LSTM小结 循环神经网络介绍原始神经网络是一对一的,也就是说只有一个输入(粉红色框),也只有一个输出(蓝色框)。比如输入一张图像,输出图像的类别; 循环神经网络有多种输入输出的组合:一对…...
2024/4/24 11:34:31 - 设计模式---类之间的关系知多少
文章目录设计模式中的关系总结一、关联关系1.双向关联2.单向关联3.自关联4.多重性关联5.聚合关系6.组合关系二、依赖关系(Denpendency)三、泛化关系(Generalization)四、实现关系(Realization) 设计模式中的关系总结 在软件系统中,类并不是独立存在的,类与类之间存在各种关系…...
2024/5/2 2:46:36 - 怎么设置servlet的编码格式为utf-8
String q2=new String(q.getBytes(“iso-8859-1”),“utf-8”);...
2024/4/24 11:34:28 - 学习笔记:String类
String是不可变字符序列。 String常用方法 { contains(String); //是否包含某字符串 startsWith(String); //字符串是否以某字符串开始 endsWith(String); //是否以某字符串结束 equalsIgnoreCase(String); //比较是否相同,忽略大小写 getBytes(); //转换为字…...
2024/4/24 11:34:34 - centOS6安装redis
以安装3.2.9版本为例1. 从网上下载安装文件 redis-3.2.9.tar.gz网址:http://download.redis.io/releases/ ,其中包含了很多历史版本2.通过sftp上传到centOS6.53.解压 tar -xzvf redis-3.2.9.tar.gz 得到redis-3.2.9文件夹4. 进入redis-3.2.9文件夹内,执行make5. 执行make …...
2024/4/24 11:34:33 - IDEA里Maven依赖无法下载 或者 本地下载完无法导入
二者的解决办法可以理解为相同的: 方法一: 将自带的镜像替换, 由: <mirror><id>nexus</id><name>internal nexus repository</name><url>http://repo.maven.apache.org/maven2</url><mirrorOf>central</mirrorOf> &…...
2024/4/28 12:44:56 - python 报错 AttributeError DataFrame object has no attribute as_matrix
一、AttributeError: DataFrame object has no attribute as_matrix在调试代码的时候遇到错误:AttributeError: DataFrame object has no attribute as_matrix在网上查了好久都找不到解决办法后来看了看pandas的文档发现新版的pandas里面as_matrix属性已经没有了解决办法:1、…...
2024/4/24 11:34:24
最新文章
- QPS(Queries Per Second)和TPS(Transactions Per Second)的介绍和区别
QPS(Queries Per Second)和TPS(Transactions Per Second)是衡量计算系统性能的两个指标,它们分别代表了系统每秒可以处理的查询数和事务数。虽然这两个术语在某些情况下可以互换使用,但它们在技术上有所区别…...
2024/5/5 4:03:29 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - N5171B是德科技N5171B信号发生器
181/2461/8938产品概述: N5171B EXG 射频模拟信号发生器具有最佳的 EXG,旨在满足您对组件参数测试和接收器校准的信号需求。其出色的硬件性能可提供更快的吞吐量、更长的正常运行时间以及极好的准确性和可重复性。 Agilent / HP N5171B EXG 射频模拟信…...
2024/5/4 4:53:18 - Stable Diffusion 本地部署教程
Stable Diffusion 是一个开源的本地部署的软件,用于在本地网络中进行消息传递和同步。下面是 Stable Diffusion 的本地部署教程: 安装稳定扩散软件:首先,您需要从 Stable Diffusion 的官方网站或 GitHub 页面上下载并安装 Stable …...
2024/5/2 9:10:34 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/4 23:54:56 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/4 23:54:56 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/5/4 23:54:56 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/4 23:55:17 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/5/4 23:54:56 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/5/4 23:55:05 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/5/4 23:54:56 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/5/4 23:55:16 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/5/4 23:54:56 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/4 18:20:48 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/5/4 23:54:56 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/5/4 23:55:17 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/5/4 23:55:06 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/5/4 23:54:56 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/4 23:55:06 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/5/4 2:59:34 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/5/4 23:55:16 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/5/4 23:54:58 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/4 23:55:01 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/5/4 23:54:56 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57