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!
