FlexJS vs BaibianJS: Inject what I want 不用再替换js,直接注入想要的JS代码 更省事了

FlexJs

FlexJs

自从BaibianJS发布之后,一直在想,我们将目标网站的jquery替换的这种玩法,有点low,在当前项目上虽然用上了,并能成功用于当前项目的网页爬虫,也是针对项目中需要在jqury.js加载完后要立即拦截xhr。更多情况下,并不需要拿来拦截xhr,用BaibianJS就显得有些不恰当了,始终给人一种勉强的感觉,需要先查看网页用到了哪个js,再针对性的替换。于是,对BaibianJS进行了适当的调整,产生了新的FlexJS,两种使用场景还是有很大的区别。

BaibianJS主要应用于接口爬取,需要对请求进行拦截,所以使用替换,及时将拦截代码注入进去。

FlexJS主要用于增强网页功能,当页面完全加载完之后再注入。

两者都是Chrome Extension,都解除了跨域限制,直接加载到Chrome扩张插件中就可以使用。二话不说上代码。

代码结构

manifest.json

{

“name”: “FlexJS”,

“version”: “1.0”,

“description”: “FlexJS,FlexJS主要有两个功能,一是注入JS,实现任性注入。二是修改Access-Control-Allow-Origin,实现任性跨域”,

 

“content_scripts”:

[

{

“matches”:  [“<all_urls>”],

“js”: [  “js/content-script.js”]

}

],

 

 

“permissions”: [“webRequest”,  “webRequestBlocking”,

“http://*/*”],

“background”: {

“scripts”: [  “background.js”]

},

“web_accessible_resources”:  [“js/inject.js”],

“manifest_version”: 2

}

 

background.js

chrome.webRequest.onHeadersReceived.addListener(function(details)  {

details.responseHeaders.push({name:’Access-Control-Allow-Origin’,value:”*”});

console.log(details.responseHeaders)

return  {responseHeaders:details.responseHeaders};

},{urls:  [“<all_urls>”]},  [“responseHeaders”,”blocking”]);

 

 

JS/content-script.js

// 向页面注入JS

function  injectCustomJs(jsPath)

{

jsPath = jsPath || ‘js/inject.js’;

var temp =  document.createElement(‘script’);

temp.setAttribute(‘type’,  ‘text/javascript’);

// 获得的地址类似:chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js

temp.src =  chrome.extension.getURL(jsPath);

temp.onload = function()

{

// 放在页面不好看,执行完后移除掉

this.parentNode.removeChild(this);

};

document.head.appendChild(temp);

}

 

injectCustomJs();

 

JS/inject.js

console.log($(“title”).html());

 

FlexJS采用了互联网上的新鲜源代码组装而成,去掉了不相掉的代码,仅有两个实用功能,一是解除跨域限制,二是注入JS。inject.js是放飞梦想的地方,可以针对特定网站进行功能加强。Good luck with FlexJS!

此条目发表在未分类分类目录。将固定链接加入收藏夹。

发表评论

邮箱地址不会被公开。 必填项已用*标注