看见JE上有了一篇这样的文章:
http://www.iteye.com/topic/646674内容是做的两个chrome插件,看见很多人对这个都感兴趣,小弟特别走网上看了一翻,终于找到了官方的chrome插件入门教程,下面是大概内容(如有不恰当的地方,多多见谅):
1.让你的浏览器准备就绪
不用多说,首先肯定是安装浏览器了,至于你是Windows,Linux,Mac?官方都有对应的下载。
2.创建并加载一个扩展
1.首先创建一个文件夹
2.在你的文件夹里面创建一个名为:manifest.json的文件,并且写下以下内容:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}
3.将这个图标复制到你的文件夹
4.加载你的扩展
a.点击浏览器的
图标,并且选择Extensions
b.加入右上角的 “Developer mode”前面是+,那么点击它,页面会添加几个按钮,并且+会变为-,
c.点击Load unpacked extension按钮,一个dialog窗口就弹出来了,
d.选择你最开始创建的文件夹,点击OK, (记住,不要放在文件目录有中文的地方,否则会报错,反正我放在桌面上就报错了)
做完以上步骤,就会出现如下的内容:
3.添加代码到你的扩展
1.编辑manifest.json,添加代码(只添加加粗的那一行):
...
"browser_action": {
"default_icon": "icon.png",
[b]"popup": "popup.html"[/b]
},
...
2.创建文件popup.html,并且写下以下代码:
<style>
body {
min-width:357px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
<script>
var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=hello%20world&" +
"safe_search=1&" + // 1 is "safe"
"content_type=1&" + // 1 is "photos only"
"sort=relevance&" + // another good one is "interestingness-desc"
"per_page=20",
true);
req.onload = showPhotos;
req.send(null);
function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");
for (var i = 0, photo; photo = photos[i]; i++) {
var img = document.createElement("image");
img.src = constructImageURL(photo);
document.body.appendChild(img);
}
}
// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +
"_s.jpg";
}
</script>
3,回到扩展管理页面,现在属性一下插件(reload),加载新版本的插件
4.点击右上角的插件图标,就会看见效果了,如以下图片:
PS:最后一步的时候,有时候会有点点慢,你点击图标后其实是在执行(当你鼠标移开的时候如果图标样式还是你鼠标一上去的时候那种样式,说明就是在运行了),我最开始还以为是我代码有问题呢,结果后来不经意间才发现这个问题,下面加上原文地址:
http://code.google.com/chrome/extensions/getstarted.html
附上我的插件文件夹,在附件里面!
分享到:
相关推荐
在官方百度搜藏Chrome插件基础上修改,支持Chrome V30.0。
https://blog.csdn.net/ardo_pass/article/details/82900160 搜索引擎快捷导航一个简单的chrome插件进行了改造,用于应用快捷导航,也可以在此基础上开发定制页面
:bell:请确保您对Chrome插件开发已经有基本的了解,入门教程: 。 在umi配置文件cofig/config.ts或.umirc.ts中配置extensions 。完整配置项说明请查阅。 如果脚脚架可使用 。 插件开发 如希望对本插件进行开发,可...
之前找了不少如何开发谷歌插件的文章,结果发现都是些很基础的内容,并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来... Chrome插件开发全攻略 搭建环境 创建一个vue-cli3项目: vue create vue-
高效开发 工具 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器...
FeHelper简直就是前端开发人员的神器,它是由国人开发的一款前端工具集合的小插件,插件功能齐全,基本上涵盖了前端从业者经常会使用到的基础功能,使用起来也很顺手。 Wappalyzer展示你访问的网页由什么技术栈所...
工具 美化 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxM 【热门插件】 ·CSDN 浏览器助手: ...
谷歌浏览器插件开发 基础应用(V3版本)
本资源是谷歌插件的讲解普及以及开发教程, 适用于想要独立开发谷歌插件并发布的入门同学, 本教程详细讲解了谷歌插件的多种展现形式以及展现形式的应用场景, 还有各种展现形式的开发教程
安装该脚本可以作为用户脚本或解压缩的扩展程序(打开开发人员模式)在Google Chrome中使用。 也应该有可能在Chrome或其他任何浏览器的用户脚本管理插件中使用此脚本。该脚本有什么作用? 安装完成后,将在所有URL...
购物 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手: ...
目前谷歌Chrome浏览器Windows 版的最新版本是:6.0.447.0 dev 目前发现过往版本5.0.371.0 Dev与微点主动防御发生冲突 [编辑本段]宣布 官方的正式宣布预定在2008年9月3日举行,并将寄给记者和部落客一则解说新...
高效开发 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器助手:...
办公效率 工具 Chrome插件 【插件安装教程】 请下载文件后先解压,然后进入页面: chrome://extensions/ 将文件拖拽到该页面,完成安装。 具体步骤: https://t.csdnimg.cn/NxMv 【热门插件】 ·CSDN 浏览器...
chrome浏览器插件开发demo合集 可食用插件 项目名 简介 使用的技术 my_rightkey_plus 可以自定义的快捷搜索 localStorage,contextMenus,扩展通信 WebPage_Marker 对网页进行拉黑,收藏,打标签 localStorage,...
谷歌浏览器划词翻译插件,办公必备,妈妈再也不用担心我英文基础差了。
这份资源提供了Google Chrome浏览器的Mac安装包,让您可以在...无论您是否已经具备了Google Chrome浏览器的基础知识,这份资源都将帮助您更好地掌握Google Chrome浏览器的使用方法,并为您的工作和学习提供有力支持。
内置的Chrome扩展支持,是模拟axios请求的最方便的工具。 目录 资料共享 示例页面 包裹 测试 嘲笑者 执照 为什么需要模拟请求 无需等待依赖的Web服务进行开发和部署,您只需定义接口字段即可进行前端和后端的并行...
LibGen快速搜索LibGenQuickSearch 是一个 Chrome 扩展,用于快速查找 Library Genesis 项目 (LibGen) 的研究快速开始在 Google Chrome 上访问 chrome://extensions。 确保选中开发人员模式框。 单击“加载解压后的...
语言:English (United ...入门:安装了Fuze for Chrome后,您会在Chrome的右上角看到一条小通知,说明已成功安装。 对于“点击通话”:拨打电话就像单击浏览器地址栏旁边的“引信”图标并选择“拨打电话”一样简单。 出