chrome插件开--开发心得

一需求

由于很喜欢看漫画，很多学习版的漫画(大家懂的)分布在各个平台。来回切换太费劲了，就想着用一个后台记录所有追的连载漫画。

记录后台+站点不必多说。提供添加漫画链接功能即可。但每次都要找到对应漫画，再后再获取指定信息，例如：封面，链接，名称。在手动切换管理系统逐条添加，过于繁琐。（主要是懒）

二功能分解

2.1 管理站点

一般的BS项目，管理漫画链接的信息即可。信息包括：封面，链接，名称。

利用之前制作的代码生成工具，很简单完成。不再过多描述。如图：

2.2 浏览器插件

在浏览漫画的时候遇到喜欢的，鼠标右键直接添加到自己的管理系统。

1）鼠标右键菜单添加一个快捷功能

2）此功能收集漫画的封面，链接，名称信息。然后提交给管理站点的API进行保存。

3）在管理站点显示页面显示。

主要针对Chrome浏览器（别的浏览器很少用，以后再说）

三技术实现

查询了大量资料发现chrome的插件，就是一个配置文件和如果html以及js即可。简单方便，就他了。

第一版简单一点，login.html back.html留着以后扩展功能的时候用。

编辑

js文件夹里的脚本文件才是主角

编辑

3.1 manifest.json

此配置文件相当于插件的配置。如图：

{"manifest_version": 2,"name": "daily_site","version": "1.0.0","description": "漫画url记录","background":{"scripts": ["js/jquery.js","js/background.js"]},"browser_action": {"default_icon": "img/icon.png","default_popup": "login.html"},"content_scripts": [{"matches": ["http://152.136.254.108/*","https://www.g-lens.com/*","https://www.1kkk.com/*"],"js":["js/jquery.js","js/myscript.js"]}],"permissions": ["contextMenus","webRequest","tabs","*://*/*","http://*/*","https://*/*"]
}

配置项说明，网上可以查到。

就说遇到的问题让人印象深刻的吧。

background 配置，里面的js脚本，会在插件加载完成后一直运行。就像名字一样是背景程序。

content_scripts 是页面程序，插件加载后插入到页面的脚本。

matches 是配置指定的站点，才会起作用，如果任何站点都会执行插件，也可能对用户造成困扰。

run_at 是运行的时机，或者是说浏览器在某个特特定过程才会执行此脚本。

permission 是插件所需的权限。需要啥权限添加啥权限，具体内容百度吧。

3.2 content_script

content_script是会注入到Web页面的JS文件，可以是多个，也可以对注入条件进行设置，也就是满足什么条件，才会将这些js文件注入到当前web页面中。

可以把这些注入的js 文件和网页的个文件看成一个整体，相当于在你网页中，写入了这些js 代码。这样就可以对原来的web页面进行操作了。

例如myscript.js 如图：

function getGo(){var arr = [];var title = $("p.j-comic-title").html();var img = $("img.lazy").attr("src");arr.push(document.location.href);arr.push(title);arr.push(img);  return arr;
}
function get1kkk(){var arr = [];var title = $("div.banner_detail_form div.info p.title").contents().filter(function (index, content) {return content.nodeType === 3;}).text();var img = $("div.banner_detail_form div.cover img").attr("src");arr.push(document.location.href);arr.push(title);arr.push(img);  return arr;
}
function importManhuaSite(){var arr = [];var currentURL=document.location.href;if(currentURL.indexOf("https://www.g-lens.com/")==0){arr = getGo();}else if(currentURL.indexOf("https://www.1kkk.com/")==0){arr = get1kkk();}console.log(arr);if(arr!=null && arr[0]!="" && arr[1]!="" && arr[2]!=""){chrome.runtime.sendMessage({url: arr[0],title:arr[1],ico:arr[2]}, res => {// 答复console.log(request.info)})}
}
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {if(request=="getdata"){importManhuaSite(); }//console.log(request.info)// 这里是返回给bg的内容//sendResponse('get the message')
})

getGo()，get1kkk()解析漫画网站页面，提取漫画封面，名称，链接的过程，没啥好说的。

chrome.runtime.onMessage.addListener 注册一个监听。这个监听就主要了，这是背景程序background.js发送消息给content_scripts时候所需要的。这是关键，两个脚本指教的通讯需要靠这种方式，请做笔记（反正我做了）。

importManhuaSite() 调用2个解析过程，完成提取之后，需要把提取内容发送给background.js进而提交给站点进行保存。其中包含chrome.runtime.sendMessage 是Content_script发送消息给background的过程，也要做笔记。

3.3 background

即插件运行的环境。可以是html+js，也可以是单纯的js。插件启动后就常驻后台，只有一个。这类脚本是运行在浏览器后台的，注意它是与当前浏览页面无关的。例如：background.js

function importMyManhua(info, tab) {chrome.tabs.sendMessage(tab.id, "getdata", res => {console.log('bg=>content')console.log(res)})
}
chrome.contextMenus.create({"title": "收藏到我的漫画站点","contexts":["page"],"onclick":importMyManhua});
chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {const url = req.url;const title = req.title;const ico = req.ico;//console.log(res)$.ajax({url: "https://localhost:44335/API/manhua.ashx",type: "GET",data: {act:'Insert',addby:1,url: url,name: title,ico: ico},dataType: 'json',success: function (data) {if(data!=null && data!=undefined){sendResponse(data);}}});
})

chrome.contextMenus.create 是添加鼠标右键菜单的功能。固定写法。点击事件绑定的是importMyManhua

importMyManhua 给content_Script发送一个消息，消息内容为getdata。

chrome.runtime.onMessage.addListener 是background注册的监听事件。主要是为了接受content_script发过来的信息，也就是前段提取的漫画名称，封面，链接信息。然后ajax提交给站点进行保存到数据库。

3.4 popup

在用户点击扩展程序图标时（下图中的下载图标），都可以设置弹出一个popup页面。而这个页面中自然是可以包含运行的js脚本的（比如就叫popup.js）。它会在每次点击插件图标——popup页面弹出时，重新载入。

没用到，但学学也无妨。

四遇到问题

1）执行Jquery

【解决】在配置manifest.json的时候，content_scripts节点配置对应的js脚本的时候，需要加入jquery.js的引用。

background节点配置也是一样。如图：

2）调用方式

开始的时候本以为可以在content_scripts中完成所有的事情，实际开发过程中发现各种问题。如下：

1）content_scripts中无法执行ajax。

2) content_scripts 也无法只用chrome.contextMenus.create 必须在background中执行。

3) background中无法获取页面dom。

本打算对付过去，看来不行了，只能看具体的实现机制了。

鉴于各种限制，只能是由content_script完成页面dom获取，background完成数据提交到后台网站。下面是background,content_script,popup之间的逻辑关系。任何两者之间通讯都是采用sendmessage和Listener方式。代码里有例子。

下图为content_script background popup关系示意图。

3）部分网站可用

未解决

五参考资料

Chrome浏览器插件(扩展)开发全攻略

Chrome插件中 popup,background,contantscript消息传递机制