wordpress响应瀑布主题,网站建设优化推广,php做视频直播网站,启动wordpress mu功能popup
在用户点击扩展程序图标时#xff08;下图中的下载图标#xff09;#xff0c;都可以设置弹出一个popup页面。而这个页面中自然是可以包含运行的js脚本的#xff08;比如就叫popup.js#xff09;。它会在每次点击插件图标——popup页面弹出时#xff0c;重新载入。…
popup
在用户点击扩展程序图标时下图中的下载图标都可以设置弹出一个popup页面。而这个页面中自然是可以包含运行的js脚本的比如就叫popup.js。它会在每次点击插件图标——popup页面弹出时重新载入。 content_scripts脚本
content_script 是植入型的它会被植入到符合匹配的网站页面上。在页面加载完成后执行。content_script 最有用的地方是操作网站页面上的DOM。一切平时做前端的一些操作它都可以做像什么添加、修改、删除 DOM获取 DOM 值监听事件等等都可以很容易的做到。所以如果想获取人家的登录帐户和密码就是件非常容易的事只需要添加content_script监听帐户和密码的文本框获得值后将数据发送到自己的服务器就可以了。因此特别说明别乱装扩展特别是不从官方扩展库里下载的扩展。配置如下 content_scripts: [{matches: [ http://*/*, https://*/* ],js: [content_scripts.js]}],
这样在页面加载完成后就会加载 content.js在 content.js 里就可以控制页面元素。可在浏览器进行调试位置如图调试的方法就是浏览器调试js的方法加断点执行 background_script脚本
插件存在则存在, 随着浏览器的打开而打开随着浏览器的关闭而关闭, 通常把需要一直运行的、启动就运行的、全局的代码放在background里面。它没办法控制页面元素但可以通过 content_script 告诉它。ajax同理如果要在页面打开时向别的服务器请求数据这时就可以告诉 background_script让它去请求然后把返回的数据发送给 content_script。这样就不会受到浏览器的安全限制影响。 background的权限非常高几乎可以调用所有的Chrome扩展API除了devtools而且它可以无限制跨域也就是可以跨域访问任何网站而无需要求对方设置CORS。 使用 background_script 要使用 background_script需要在 manifest.json 中配置如下 background: {scripts: [background.js],persistent: false},
如果要调试可以打开插件一个tab页或者popup页的检查或者点击背景图 消息传递
在网页实际运行过程中原始web注入的的content_scriptsbackground.js新的web页面当打开多个页面时就会存在多个新的web页面。因为每个页面都注入content_scripts。那么在通信的时候后台脚本或则popup页面怎么确定是与那个页面进行消息交互呢通过tabID。
tab是什么呢 上图就有三个tab标签也就是在浏览器中打开的网页对应着一个tab图中第二个和第三个虽然url相同但tabid不一样。三个主要部分消息交互机制如下图 background 和 content_scripts 的通信
接收消息chrome.runtime.onMessage.addListener
发送消息chrome.runtime.sendMessage
content_scripts发送和接收消息
let btn document.querySelector(button); // 页面DOM
btn.onclick function () {sendMsg()
};// 发送消息
function sendMsg() {chrome.runtime.sendMessage({ origin: pageJs }, function (data) {// 接受返回信息console.log(: content_scripts.js send);console.log(: content_scripts.js sendBack, data);console.log(.....................);});
}// 接受信息
function receiveMsg() {chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {console.log(: content_scripts.js receive, data);console.log(: content_scripts.js receiveFn);sendResponse(data);console.log(.....................);});
};
receiveMsg();
background发送和接收消息
// 接收到信息
function receiveMsg() {// data数据 sender发送方 sendResponse回调chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {console.log(: background.js receive, data);console.log(: background.js receiveFn);sendResponse(data)console.log(.....................);tabs();});
};
receiveMsg();// 监测到新的tab
async function tabs() {const tabId await getCurrentTabId();// 在背景页面发送消息需要当前 tabIDchrome.tabs.sendMessage(tabId, { name: bJs }, function (data) {console.log(: background.js send);console.log(: background.js sendBack, data);console.log(.....................);});
};// 获取当前 tab ID
function getCurrentTabId() {return new Promise((resolve, reject) {chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {resolve(tabs.length ? tabs[0].id : null)});})
};
所有通信之前发送方和接收方必须都存在否则报错。 background 和 popup的通信
收消息在background中: chrome.extension.getViews() 获取当前插件内每个运行页面的窗口数组([window, window])
发送消息在右上角弹出框中chrome.extension.getBackgroundPage() 获取背景页面的窗口对象(window)
background.js在原来基础上增加一个通信函数
/*** 通信函数*/
function backFun(...arg) {const allViews chrome.extension.getViews()console.log(arg);console.log(chrome.extension.getViews(), allViews)
}
popup.js页面增加
let btn document.getElementById(submit);// 可以获取到background.js中设置的函数,
const background chrome.extension.getBackgroundPage();// 点击按钮
btn.onclick function (e) {var name document.getElementById(name).value;var password document.getElementById(password).value;// sendMsg(name, password);background.backFun(name, password)
}
content_scripts 和 popup的通信
content_scripts.js里面
let btn document.getElementById(submit);// 点击按钮
btn.onclick function (e) {var name document.getElementById(name).value;var password document.getElementById(password).value;tabs(name, password);
}// 去链接,对应的tab标签页面
async function tabs(...arg) {const tabId await getCurrentTabId();const connect chrome.tabs.connect(tabId, { name: popup }); // 和指定tabID建立链接,并设置信号名字// 发送信息connect.postMessage(arg);// 接受返回信息connect.onMessage.addListener(mess {console.log(mess)})
};// 获取当前 tab ID
function getCurrentTabId() {return new Promise((resolve, reject) {chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {resolve(tabs.length ? tabs[0].id : null)});})
};
popup.js
// 监听链接
chrome.runtime.onConnect.addListener(res {if (res.name popup) {res.onMessage.addListener(mes {console.log(: popup.js receive, mes);res.postMessage(: popup.js receiveBack)});}
});
弹出框只要点击插件才能弹出而当你操作页面的时候插件弹框又会消失…消失之后弹框的.js等都会销毁…所以可以向background通信然后点击弹出之后弹出框和background通信或者弹出之后直接向content_scripts通信。
content_scripts 和 popup的通信也可以通过另外方式传递
content_scripts.js
// 点击按钮
btn.onclick function (e) {var name document.getElementById(name).value;var password document.getElementById(password).value;tabs(name, password);
}// 去链接,对应的tab标签页面
async function tabs(...arg) {const tabId await getCurrentTabId();// 页面发送消息需要当前 tabIDchrome.tabs.sendMessage(tabId, { name: bJs }, function (data) {console.log(: background.js send);console.log(: background.js sendBack, data);console.log(.....................);});};// 获取当前 tab ID
function getCurrentTabId() {return new Promise((resolve, reject) {chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {resolve(tabs.length ? tabs[0].id : null)});})
};
popup.js chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {console.log(: popup.js receive, data);console.log(: popup.js receiveFn);sendResponse(data);console.log(.....................);});
