chrome插件开发
Chrome浏览器是我在工作中常用的一个浏览器,作为程序员的我更喜欢单调简洁的风格,而Chrome恰恰是一个不错的选择,他的运行速度、界面风格以及强大的前端调试功能都是我一直使用他的理由。
在我们日常生活或者工作中难免出现在某些网站上做一些自动化的处理,或者希望开发出一些针对某些网站的辅助程序,当然可以实现这个需求的技术方案有很多,这里分享一个利用js写浏览器用户插件的方式来实现我们的这个需求。
首先举个例子,代码如下:
新建manifest.json文件
{
"manifest_version": 2,
"name": "Js Test",
"description": "这是一个插件demo",
"version": "1.0",
"icons": {
"128" : "icon.png"
},
"permissions": [
"tabs", "http://*/*","https://*/*"
],
"content_scripts": [
{"js":["maidian.js"],"matches":["https://www.baidu.com/"]}
]
}
新建maidian.js文件
插件配置成功后工具栏会有相应的图标,在访问配置网站的时候根据我们设置的规则将js注入到主页中,因为这里我只写了一句alert所以在访问百度的时候就会自动执行这句代码弹出提示框,实际应用,我们可以写具体的js代码来对当前页面dom树和js进行调用。
下面是对配置项的解释
manifes_version:声明我们使用的版本
name:插件的名称
description:插件的描述
icons:插件显示的图标
permissions:插件使用的权限
tabs:允许使用chrome.tabs和chrome.windows的api,后面则是匹配模式,指可以和该模式的网站运行的代码进行交互
Content scripts:指定Web页面内运行的javascript脚本,通过使用标准的DOM,它们可以获取浏览器所访问页面的详细信息,并可以修改这些信息
js:要注入的脚本
marches:指定要注入脚本的url
这里推荐一个插件的分享网站:https://greasyfork.org/zh-CN/scripts,里面有很多好用的插件分享,下面是截图
谷歌浏览器控制台打印完整对象
谷歌浏览器可以通过console.log方法打印出对象信息,但是有的时候对象比较深,会出现...,我现在想将这个对象直接复制出来在js代码中直接使用这个对象,经过查阅发现一个方法
我们可以使用谷歌控制台的copy函数
copy(temp1)
这时候ctr+V 就可以复制下来了