chrome插件开发之获取图片信息

发表于 更新于
受任于败军之际，奉命于危难之间，尔来二十有一年矣。

manifest.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name" : "Imageinfo",
"version" : "1.0.1",
"description" : "Get image info for images, including EXIF data",
"background" : { "scripts": ["js/background.js"] },
"permissions" : [
"contextMenus",
"tabs",
"http://*/*",
"https://*/*"
],
"minimum_chrome_version" : "6.0.0.0",
"icons" : {
"16" : "images/icon16.png",
"48" : "images/icon48.png",
"128" : "images/icon128.png"
},
"manifest_version": 2
}

background.js

1
2
3
4
5
6
7
8
9
10
11
12
13
function getClickHandler() {
return function(info, tab) {
var url = 'html/index.html#' + info.srcUrl;
chrome.windows.create({ url: url, width: 520, height: 660 });
};
};

chrome.contextMenus.create({
"title" : "Get image info",
"type" : "normal",
"contexts" : ["image"],
"onclick" : getClickHandler()
});

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/content.js"></script>
    <title>Document</title>
</head>
<body>
     <h1>tihs is a new page</h1>
     <div id="con">

     </div>
</body>
</html>

content.js

1
2
3
4
5
$(function () {
url = window.location.href;
kk = url.split('#');
$("#con").html("<img src='"+kk[1]+"' />");
});