chrome插件是個挺好玩的東西,可以注入JS到網頁,執行很多有趣的事情,自動化地去做很多人工去做的事情
先看下插件效果,
找到一篇想要的文章后,點擊插件
自動跳轉到后臺并轉發此文章
自動轉發富文本
意義及前提:
這個插件是幫一個在謹和的同學做的,自動化完成轉發并帶有文章文字格式、表格、附件,也減少了他的工作壓力
當然因為這個同學并不是程序員,所以并沒有后臺源碼和服務器
步驟分析:
想要寫小插件嘛首先要先手動能做一些事情,然后再用插件將這件事情腳本化
好了先登入同學所在公司的后臺,點開F12調試工具,發布一篇文章看看
發布成功了(不得不吐槽一下,外包的網站真diao,發布成功了還返回302)
看一下他發送的數據格式
我們再自己模擬ajax在控制臺試下,能不能發布成功
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4) {
alert("轉發成功")
window.location.reload()
}
}
xhr.open("POST", "/yunadmin/news/ajax.php?action=add_news", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("title=${encodeURIComponent(title)}&type2=-1&author=%E7%AE%A1%E7%90%86%E5%91%98&image=&content=${encodeURIComponent(contain)}&mobile_content=&add_time=${date}&is_top=n&sort=0&status=y&click_url=n&outside_url=&pccolor=&mcolor=&submit=%E6%8F%90%E4%BA%A4");
嗯,果然成功了,現在發送文章沒問題了
我們可以看到這些字段,title為標題、add_time為時間、content為內容,
發文章的方法找到了,現在只要把相應的方法寫在chrome插件里就可以了
chrome有開發文檔,360也翻譯了一份,雖然不全但是可以看看 http://open.chrome.360.cn/html/dev_doc.html
先是配置文件
manifest.json
{
"name": "謹和文章轉發",
"description": "自動轉發文章到謹和后臺系統",
"version": "1.0",
"permissions": [
"http://jinheip.website6534.yizhanwei.com/*",
"http://www.szip.gov.cn/info.aspx*",
"http://bbs.mysipo.com/thread*",
"http://ipms.ujs.edu.cn/show.asp?id=*",
"http://www.jsip.gov.cn/*",
"http://www.sipo.gov.cn/*"
],
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"browser_action": {
"default_title": "謹和文章轉發",
"default_icon": "icon.png"
},
"manifest_version": 2
}
其中scripts為要寫的腳本,default_title為插件名稱、default_icon為圖標,permissions為允許運行的網址名
配置文件寫好之后,寫我們的JS腳本
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
//這里寫,插件被點擊時觸發的方法
});
chrome.tabs.getSelected(function(tab){
url = tab.url;//其中tab為當前激活tab
})
有了當前tab,我們要想辦法獲取當前tab內的內容,
不過chrome似乎并沒有提供相應的方法,沒關系直接ajax在get一下就可以了
function fetchData(arg) {//url,method,callback
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
arg.callback(xhr.responseText);
} else {
arg.error(xhr.responseText)
}
}
}
xhr.open(arg.method, arg.url, true);
if(arg.header){
for(var key in arg.header){
xhr.setRequestHeader(key, arg.header[key]);
}
}
xhr.send(arg.str);
};
很普通的一段ajax,綜合起來就是
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.getSelected(function (tab) {
url = tab.url;
fetchData({
url: tab.url,
method: 'GET',
callback: {
try{
parser=new DOMParser();
var doc = parser.parseFromString(text, "text/html");
var title = doc.querySelector('#lblName').innerText
var contain = doc.querySelector('#topcontainer table:nth-child(3) div table:nth-child(3)').innerHTML.replace(/href="\//g, 'src="http://www.szip.gov.cn/')
send(title, contain)//這里寫調接口
}catch(e) {
alert("發生錯誤")
}
},
error: function (d) {
alert("獲取內容失敗")
}
});
})
});
function fetchData(arg) {//url,cookie,method,callback
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
arg.callback(xhr.responseText);
} else {
arg.error(xhr.responseText)
}
}
}
xhr.open(arg.method, arg.url, true);
if(arg.header){
for(var key in arg.header){
xhr.setRequestHeader(key, arg.header[key]);
}
}
xhr.send(arg.str);
};
現在我們既有了當前tab的html內容,又有了轉發的post接口,接下來就很簡單了,寫一下上面的調接口回調
由于chrome插件的ajax也存在跨域,所以我們要先chrome.tabs.create({url:xxx,function(){})
進入后臺頁面之后chrome.tabs.executeScript向后臺執行JS代碼
function send(title,contain){
var d = new Date()
var date = encodeURIComponent(d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds())
chrome.tabs.create({url:"http://jinheip.website6534.yizhanwei.com/yunadmin/news/index.php"}, function(tab){
chrome.tabs.executeScript(null,{code:`
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4) {
alert("轉發成功")
window.location.reload()
}
}
xhr.open("POST", "http://jinheip.website6534.yizhanwei.com/yunadmin/news/ajax.php?action=add_news", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("title=${encodeURIComponent(title)}&type2=-1&author=%E7%AE%A1%E7%90%86%E5%91%98&image=&content=${encodeURIComponent(contain)}&mobile_content=&add_time=${date}&is_top=n&sort=0&status=y&click_url=n&outside_url=&pccolor=&mcolor=&submit=%E6%8F%90%E4%BA%A4");
`})
})
}