之前 说过怎么 移除不喜欢的主播房间，但却是写在 文件里的，如果是开发者模式，可以修改js文件。但上是 打包.crx 给别人用，就不那么方便了。
这章来写一个 动态添加过滤房间的方法，我就想把 房间数组，放入 localStorage里，然后removeRoom.js 读取内容并启动过滤，在房间的页面 ，点击扩展按钮，可添加，删除此房间。但是！ removeRoom.js 与 扩展background.js是运行在两平台上的，不能互相访问数据！所以就要说到 传值的问题。
我们先 定义下 popup 的页面(就是点击扩展时，要展示的页面)，
由于Chrome 不允许将JavaScript 内嵌在HTML 文件中，所以我们单独编写一个options.js脚本文件，并在
HTML文件中引用它。下面来编写 manifest.json 文件。
"browser_action": {
"default_icon": "ico/icon.png",//扩展在浏览器右上图标
"default_popup": "popup.html"
},
然后写下 popup.html的页面，但注意，chrome允许在穿上页面直接写入js方法，只能引用js文件。
<div id ="roomfilterp"> <li> <input type="text" name="fname" id="roomfiltertext" placeholder="原因(可以空)" /> </li> <li> <input type="checkbox" id="roomfilterchk" />是否过滤 </li> </div> </details> </body> <script src="js/BaseJs/jquery.min.js"></script> <script src="js/BaseJs/popup.js"></script>
我定义了一个 类方法
1 /* 2 3 * 与后台通讯方法 4 5 * _msgType 判断方法法。 eg.{type:"function",functionName:"getRooms"} 6 7 * obj 存放返回值的对象。 8 9 */ 10 11 RoomObj.getDataFormBackground = function(_msgType,obj) { 12 13 chrome.runtime.sendMessage( 14 15 _msgType, 16 17 function(response) { 18 19 obj.data = response; 20 21 } 22 23 ); 24 25 };
在removeRoom.js 调用
//从bg.js获取要过滤的房间数组
1 var roomObjArr = new Object; 2 3 if (roomObjArr.data == undefined) { //从 localStorage.RoomArr 获取要过滤的房间 4 5 RoomObj.getDataFormBackground({type:"function",functionName:"getRooms"},roomObjArr); 6 7 } 8 9 10 11 然后在bg.js里，写监听事件。 12 13 14 15 /* 16 17 * 如果没有相应的结果,则返回null 18 19 */ 20 21 22 23 chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){ 24 25 exId=sender.id; 26 27 if (sender.hasOwnProperty("tab")){tabId=sender.tab.id}else{return}; //点击扩展时,也会激活此事件 28 29 var result; 30 31 if (message.type =="function") { 32 33 switch(message.functionName){ 34 35 case "getRooms": 36 37 result= getRooms(); 38 39 break; 40 41 case "getSender": 42 43 result = sender; 44 45 break; 46 47 } 48 49 } 50 51 sendResponse(result); 52 53 }); 54 55 56 57 function getRooms(){ 58 59 return localStorage.RoomArr==undefined? []:JSON.parse(localStorage.RoomArr); 60 61 };
这里要说一下，如果想取回在hrome.runtime.sendMessage(msg,callback)，里的值，虽然callback里console.log每次都能正确显示，要赋值时，是异步的，也就 是说等不能返回值，编译器，就执行到下一步了，所以要setoutTime下。
取值可以了，我们如何把不喜欢的房间加进去呢？这就要说到那个popup页面了，里面引用了1个新加的popup.js文件，代码如下
/*
* Room 类名
* _id 房间id
* _des 说明
*/
function Room(_id,_des) {
this.id = _id;
if (_des == undefined) {
this.des ="打的QQ区";
}else{
this.des = _des;
}
};
var roomId="";
var bg = chrome.extension.getBackgroundPage();
window.onload =function(){
document.getElementById("roomfilterchk").onclick = function(){
try{
if(this.checked) {
var des = $("input[id='roomfiltertext']").val();
des = des =="" ? undefined:des;
bg.addRooms(new Room(roomId,des),true);
}else{
bg.addRooms(new Room(roomId));
}
}catch(err){
}
};
}
// 判断是否已移除,返回 room 实体
function roomRemoved(_roomId) {
var result;
var roomAr = bg.getRooms();
for (var i = 0; i < roomAr.length; i++) {
if (roomAr[i].id == _roomId) {
result = roomAr[i];
break;
}
}
return result;
}
var msg ={type:"function",functionName:"getRoomId"};
var strId ="";
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, msg, function(response) {
strId = response;
});
});
setTimeout(function(){
roomId = strId;
console.log(roomId);
},100);
setTimeout(function(){
delayDo();
},150);
function delayDo() {
var removedRoom = roomRemoved(roomId);
var roomfilterchk = document.getElementById("roomfilterchk");
if (roomId =="" ||roomId ==undefined) {
$("#roomfilterp").remove();
return;
}
if(removedRoom != undefined){
roomfilterchk.checked = true;
$("input[id='roomfiltertext']").val(removedRoom.des);
}
}
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse)
{
var result;
if(message.type == "function") {
switch(message.functionName){
case "getRoomId":
result= roomObj.getRoomId();
break;
case "getSender":
result = sender;
break;
}
}
sendResponse(result);
});
这样在房间内打开时，点击按钮，就会把房间加入到 localStorage.RoomArr里啦。
但是卸载扩展就会清理 数据，如果 保存数据呢 ，可以在 chrome://extensions/
点背景页，在Console里输入 localStorage.RoomArr 就看到已已加入的数据(红色部分)
复制到一个txt文本里，
如果想还原，还是打开这个页面，输入localStorage.RoomArr=保存的字符串，即可。