`

Google官方chrome插件入门教程

阅读更多
看见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
附上我的插件文件夹,在附件里面!
  • lib.rar (4.9 KB)
  • 下载次数: 254
分享到:
评论
8 楼 winter8 2011-04-15  
能不能解释一下popup.html作为一个网页时,浏览器不显示啊?
7 楼 goodboy168 2011-01-31  
你那不是插件!是扩展!!两回事来的。插件是用npapi去写的
6 楼 qingchundou110 2010-04-28  
不顶不厚道
5 楼 cectsky 2010-04-27  
顶一个哈       
4 楼 lucky16 2010-04-26  
NumbCoder 写道
287854442 写道
赞一个,Chrome的插件是用js写的?晕。。。

你以为是用什么? Firefox的也差不多。

我原来也没有想到是用的JS,但是到了google上看了才知道是用的JS,实在惭愧啊!
3 楼 NumbCoder 2010-04-26  
287854442 写道
赞一个,Chrome的插件是用js写的?晕。。。

你以为是用什么? Firefox的也差不多。
2 楼 287854442 2010-04-25  
赞一个,Chrome的插件是用js写的?晕。。。
1 楼 lucky16 2010-04-20  
如果要生成chrome专用的插件安装包,那么就在扩展管理页面里里面点击pack extension按钮,然后选择插件目录,就可以了

相关推荐

    chrome插件开发文档-详细pdf版.7z

    Chrome插件,也被称为Chrome扩展,是Google Chrome浏览器上的应用程序,可以增强或修改浏览器的功能。它们通常是用HTML、CSS和JavaScript编写,通过Chrome的API(应用程序接口)与浏览器交互,提供用户自定义的浏览...

    Chrome Extension (Chrome插件)开发官方最新文档(20190401)

    Chrome扩展(Chrome插件)是谷歌浏览器上的应用程序,它们能够增强和定制用户的浏览体验。这些插件是由HTML、CSS和JavaScript构建的,并通过Chrome的API与浏览器进行交互,实现诸如网页拦截、数据存储、用户界面修改...

    附带google chrome插件安装教程, 用于yapi的接口测试所需插件2.8.0

    本教程将详细讲解如何在Google Chrome浏览器上安装适用于YApi接口测试的插件版本2.8.0。 首先,了解Java与接口测试的关系。Java是一种广泛使用的编程语言,尤其在后端开发中,许多服务器端接口是用Java编写的。因此...

    chrome插件开发 - tab页面切换插件

    Chrome插件开发是一个充满创新和实用性的领域,它允许开发者为全球最大的网络浏览器之一——Google Chrome,添加自定义功能和增强用户体验。在这个“chrome插件开发 - tab页面切换插件”项目中,我们关注的焦点是...

    谷歌浏览器插件开发代码demo | google-chrome-plugin-demo.zip

    通过深入研究"full-chrome-plugin-demo",开发者不仅可以学习到Chrome插件的基础知识,还能了解到如何将这些知识应用到实际项目中,提升开发技能。对于想要扩展浏览器功能、实现个性化需求或者开发创新应用的开发者...

    Chrome插件开发3.0

    Chrome插件开发3.0是关于构建和优化Google Chrome浏览器扩展程序的一门技术主题。随着互联网的快速发展,浏览器插件已经成为提升用户体验、增强浏览器功能的重要工具。Chrome作为全球最受欢迎的浏览器之一,其丰富的...

    chrome浏览器插件例子

    - 更新策略:Chrome插件支持版本管理,通过manifest.json中的`version`字段控制更新。 5. **安全性与隐私** - 数据安全:插件应妥善处理用户数据,避免泄露,遵循最小权限原则。 - 隐私保护:获取用户信息前需...

    ChromeExtensionDocument:chrome插件中文开发文档.zip

    Chrome扩展,也称为Chrome插件,是Google Chrome浏览器上的应用程序,可以增强或修改浏览器的功能。这些扩展基于Web技术,如HTML、CSS和JavaScript,能够访问Chrome的API来实现与浏览器的深度集成。...

    chrome插件API中文版

    Chrome插件,也被称为Chrome扩展,是Google Chrome浏览器上的应用程序,可以增强或修改浏览器的功能。它们利用了Chrome的API(应用程序编程接口)来实现各种各样的功能,包括但不限于:网页内容修改、网络请求拦截、...

    简单的chrome插件,实现自动登录.

    Chrome插件是Google Chrome浏览器的一种扩展程序,它们可以增加或修改浏览器的功能,以满足用户的个性化需求。本案例中,我们关注的是一个简单的Chrome插件,它的功能是实现自动登录。这个插件对于经常需要访问多个...

    淘宝自动登录chrome插件

    首先,我们要理解的是,Chrome插件是基于谷歌浏览器的扩展机制,这些扩展通常由HTML、CSS和JavaScript等Web技术编写,并通过manifest.json文件进行配置。在这个插件中,JavaScript是核心部分,负责处理自动登录的...

    一系列chrome 例子插件

    本压缩包包含了一系列的基础Chrome扩展程序示例,可以帮助开发者学习和理解如何构建自己的Chrome插件。 首先,"chrome extension"是Chrome插件的核心概念,它是由谷歌提供的一个开放平台,允许开发者通过编写特定的...

    七夕表白Chrome插件

    【七夕表白Chrome插件】是一款利用JavaScript技术打造的浪漫表达工具,专为七夕这一中国传统情人节设计。这款插件通过HTML、CSS和JavaScript的完美结合,为用户呈现出满屏的爱心效果,让爱意传递更为生动有趣。下面...

    简单的chrome插件示例

    Chrome插件,也被称为Chrome扩展,是Google Chrome浏览器上的小型应用程序,可以增强或修改浏览器的功能。这个"简单的chrome插件示例"是一个基础的开发案例,对于初学者来说,它是了解如何构建Chrome插件的好起点。 ...

    chrome插件mqttbox

    **MQTTBox:Chrome 插件与 MQTT 协议详解** MQTTBox 是一款专为 Chrome 浏览器设计的插件,同时也适用于新版的 Microsoft Edge 浏览器(需开启开发者模式)。这款插件主要功能是提供 MQTT(Message Queuing ...

    谷歌插件,用于网页跳转

    2. **Chrome插件结构**:一个Chrome插件通常包含以下几个部分: - `manifest.json`:插件的配置文件,定义了插件的元数据,如版本号、权限、图标等。 - JavaScript代码(如`background.js`):运行在后台的脚本,...

    简单入门的chrome插件源码

    这是一套完整的chrome浏览器插件学习源码,基于vue.js,涵盖了manifest.json基本配置、background后台数据运行、ajax请求、localStorage本地数据操作等常见功能,非常适合插件入门学习。

    chrome插件开发文档

    Chrome插件,也被称为Chrome扩展,是Google Chrome浏览器上的应用程序,可以增强或修改浏览器的功能。它们通常是用HTML、JavaScript和CSS等Web技术编写的,并通过Chrome Web Store分发。Chrome插件开发允许开发者...

    chrome浏览器插件开发

    Chrome插件的基础应用主要涉及V3版本的API和架构,这是一个相对最新的版本,旨在提高性能、安全性和用户体验。 在V3版本中,Chrome插件的开发有以下几个核心知识点: 1. **Manifest文件**:这是每个Chrome插件的...

    chrome浏览器同步插件xBrowserSync

    Chromium是Google Chrome浏览器的基础开源项目,许多其他第三方浏览器,如Brave、Opera、Vivaldi等,都是基于此内核构建的。 xBrowserSync的工作原理是通过加密技术保护用户的个人数据,并在用户的各个设备间同步...

Global site tag (gtag.js) - Google Analytics