js实现谷歌插件

最新推荐文章于 2023-06-09 13:56:04 发布

Swen程序员

最新推荐文章于 2023-06-09 13:56:04 发布

阅读量2.4k

点赞数

分类专栏： JavaScript 文章标签： js 谷歌插件 javascript

本文链接：https://blog.csdn.net/a3025056/article/details/52856602

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

插件的制作是比较简单的，只是有几个点需要注意一下。下面我给大家介绍一下整个插件制作的步骤

1.创建一个文件夹，里面包含以下几个文件

a.manifest.json （插件的配置文件）

b.icon.png（插件图标）

c.popup.html（背景页）

d.popup.js（背景页的JS）

2.详细介绍配置文件--mainfest.json

{
"name": "TiebaAddin",//插件名
"version": "1.0",//插件版本
"description": "An addin for Tieba.",//插件描述

"manifest_version":2,//必须这么写这是manifest的版本

"browser_action": {"default_icon": "icon.png"},//插件背景页设置
"permissions": ["http://*/*","tabs","https://*/*"]//权限设置--跨域问题的解决

//permissions 属性是一个数组，它定义了扩展需要向 Chrome 申请的权限，比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡（tabs）、获取当前活动选项卡（activeTab）、浏览器通知（notifications）、存储（storage）等，可以根据需要添加。

}

附上第一个插件的代码：(jq的包就不贴出来了)

这个插件主要实现的功能是查看网站和网页的百度收录情况。

1.manifest.json

{  
      "manifest_version": 2,  
      
      "name": "百度收录情况",  
      "description": "Cocopico用于查看百度对网站和网页的情况。",  
      "version": "1.1",
      "browser_action": {  
        "default_icon": "favicon.png",  
        "default_popup": "popup.html"  
      },  
      "permissions": [  
        "tabs","http://*/*","https://*/*"
      ]
}

2.popup.html

<!doctype html>  
    <html>  
      <head>  
        <title>百度收录情况</title>  
      </head>
	  <script src="jquery-3.1.0.min.js"></script>
	  <script src="popup.js"></script>
	  <style>
		body{
			width:400px;
			min-height:50px;
		}
		#div2_content{
			
		}
	  </style>
      <body>  
		<div id="div1">
			<p>网站收录情况：<span id="div1_span"></span></p>
		</div>
		<div id="div2">
			<p>网页收录情况：<span id="div2_span"></span></p>
			<div>
				<a id="div2_head"></a>
				<div id="div2_content">
					<table>
						<tr>
							<td id="div2_img"></td>
							<td id="div2_text"></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
      </body>
    </html>

3.popup.js

chrome.tabs.getCurrent=function(callback) {
	chrome.tabs.query({
		active: true,
		windowId: chrome.windows.WINDOW_ID_CURRENT
	}, function (tabs) {
		if (tabs && tabs[0]) {
			callback(tabs[0]);
		}
	});
};
	
	
$(function(){
	chrome.tabs.getCurrent(function(tab){	
		var url1=(tab.url.match(/\S+:\/\/([^\/]+)\/?.*/)[1]);
		//查询网站
		$.ajax({
			url:'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=78040160_28_pg&wd=site%3A'+url1,//tab.url,
			type:'get',
			success:function(data){
				var cont=$(data).find('.c-span-last p:first b').text();
				
				if(cont==""){
					$("#div1_span").text($(data).find('#1 .c-span-last p:last span').text());
				}else{
					$("#div1_span").text(cont);
				}
			}
		});
		//查询网页
		var url='https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=78040160_28_pg&wd='+encodeURIComponent(tab.url);

		$.ajax({
			url:url,//tab.url,
			type:'get',
			success:function(data){
				var cont=$(data).find('#content_left .hit_top_new .c-gap-bottom-small span .c-gray:first').text();
				var reg = new RegExp("没有找到该URL");
				if(reg.test(cont) || cont==""){
					$("#div2_span").text("该网页未被收录");
					$("#div2_content").attr({"dispaly":"none"});
				}else{
					$("#div2_span").text("该网页已被收录");
					$("#div2_head").text($(data).find('#1 .t').text());
					$("#div2_head").attr({"href":url,"target":"_blank"});
					if($(data).find('#1 .c-img').attr("src")!=undefined){
						$("#div2_img").append("<img style='height:75px;' src="+$(data).find('#1 .c-img').attr("src")+"/>");
					}
					$("#div2_text").append($(data).find('#1 .c-abstract').text());
				}

			}
		});
	});
});

Swen程序员

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js实现谷歌插件

插件的制作是比较简单的，只是有几个点需要注意一下。下面我给大家介绍一下整个插件制作的步骤1.创建一个文件夹，里面包含以下几个文件a.manifest.json （插件的配置文件） b.icon.png（插件图标） c.popup.html（背景页）d.popup.js（背景页的JS）2.详细介绍配置文件--mainfest.json　　{
复制链接

扫一扫

专栏目录