谷歌浏览器（Chrome）插件开发

发表于 | 更新于:
字数统计: 301 | 阅读时长 ≈ 1

本文主要介绍谷歌浏览器（Chrome）插件开发的基础知识，并结合书签做一个demo。

由于谷歌官方文档需要翻墙，我这里贴出一下国内的360地址（它们都是基于chrome开发的）http://open.chrome.360.cn/extension_dev/overview.html 。

1.开发Chrome插件需要几个文件？

至少3个，基础配置文件 manifest.json, 基础 html, 基础 js。

2.demo工程介绍

demo完成两个功能，一个是创建书签，一个是读取书签。

3.具体代码实现

manifest.json [名字不要写错]

{
"name": "书签同步",
"version": "1.0.0",
"manifest_version": 2,
// 简单描述
"description": "谷歌浏览器书签同步-CN Only",
"icons": {
"16": "images/icon16.jpg"
},
// 浏览器小图表部分
"browser_action": {
"default_title": "书签同步",
"default_icon": "images/icon16.jpg",
"default_popup": "html/index.html"
}, 
"content_scripts": \[
{
"js": \["scripts/jquery.js","scripts/app.js"\], 
"matches": \[
     "http://*/*",
     "https://*/*" 
\], 
"run\_at": "document\_end"
}
\], 
"permissions": \[ "bookmarks", "tabs", "chrome://favicon/" \],
 "content\_security\_policy": "script-src 'self'  https://ssl.google-analytics.com; object-src 'self'"
}

插件目录

jquery.js –jquery.1.9.min.js[更高版本也可以]

app.js

function showInfo(m){
    $("#info").html(m);
}

$(function() {
    $("#createBookMark").click(function () {

        console.log('--create');


        chrome.bookmarks.create({
                'title': '李唐',
                'url': 'http://www.yf2017.top/home\_index\_daohang.html'
            },
            function (newFolder) {
                console.log("create bookmark: " + newFolder.title);

            }
        );
    });

        $("#searchBookMark").click(function () {
            console.log('query--');
             
            chrome.bookmarks.getRecent(100, function (v) {
                for (i = 0; i < v.length; i++) {                     console.log(v\[i\].title);=""                     $("#res").append( v\[i\].title + ',' + v\[i\].url + '');
                } 
            });
        });


});

index.html




 








    创建书签
     
    搜索书签

icon16.jpg

icon

ok, 现在编写完成。来试一下。

开发者模式

选择加载已解压的扩展程序，加载完后看到页面有 ‘书签同步’

预览图

点击搜索书签，看到书签加载。创建书签，则创建了一个书签。【完成验证】

【本文完】

0%