并非所有的黑客行為都是惡作劇。下面是如何使用JavaScript使瀏覽器更好的方法。

JavaScript的在線資源并不缺乏，從教你基礎(chǔ)知識(shí)的課程到應(yīng)用程序創(chuàng)建的教程。在本文中，我將解釋如何使用JavaScript創(chuàng)建有用的瀏覽器黑客，以提高您的Web體驗(yàn)和提高工作效率。這篇文章不需要您自己開(kāi)發(fā)應(yīng)用程序，甚至不需要對(duì)產(chǎn)品有特別深入的了解。

書(shū)簽的力量

我們都知道書(shū)簽有多有用。它們?cè)试S您保存到網(wǎng)頁(yè)的鏈接，對(duì)其進(jìn)行分類(lèi)，并添加其他數(shù)據(jù)(元數(shù)據(jù))，以幫助您在將來(lái)快速找到該鏈接，并將其存檔到您可以輕松導(dǎo)航的結(jié)構(gòu)中。許多人不知道的是，您還可以將微小的代碼片段保存到這些書(shū)簽中，這些書(shū)簽是在您所在的網(wǎng)頁(yè)的上下文中執(zhí)行的，包括對(duì)其結(jié)構(gòu)和樣式的訪問(wèn)。

如果你打開(kāi)Facebook控制臺(tái)，你會(huì)發(fā)現(xiàn)它的開(kāi)發(fā)者非常反對(duì)這種窺探-這是有理由的。即使沒(méi)有訪問(wèn)他們的代碼，你也可以進(jìn)行修改，甚至破壞一些應(yīng)用程序。

Facebook的開(kāi)發(fā)者不想讓你弄亂他們的控制臺(tái)。

不過(guò)，你可能會(huì)忘記你輸入的內(nèi)容，或者丟失一些文本?；蛘?，如果您像我一樣，保存您打開(kāi)的文件，復(fù)制它們，到您想要的網(wǎng)站，打開(kāi)控制臺(tái)，粘貼和運(yùn)行的過(guò)程似乎需要很大的努力。下面是一些我用來(lái)檢查網(wǎng)頁(yè)的長(zhǎng)度的代碼(用我正在使用的設(shè)備上的屏幕來(lái)衡量)。這在Edge，F(xiàn)irefox，Chrome，甚至我的手機(jī)上都適用：

javascript:alert(document.body.scrollHeight / window.innerHeight) 

如果我知道一頁(yè)有多長(zhǎng)，我可以預(yù)先決定是否要讀。我用它來(lái)向客戶(hù)展示各種設(shè)備上有多大或多小的網(wǎng)頁(yè)。

下面是我使用的另一個(gè)工具，用于刪除程序員博客文章中的所有圖片和文章，只獲取高光部分(我還會(huì)對(duì)它們進(jìn)行書(shū)簽；我不會(huì)將瀏覽作為閱讀的替代方案)。

javascript:(function(){ [].slice.call(document.querySelectorAll('img, .gist')).forEach(function(elem) { elem.remove(); }); })()

您會(huì)注意到，大多數(shù)代碼并不復(fù)雜；實(shí)際上，有些代碼非常簡(jiǎn)單。因?yàn)檫@些主要是我個(gè)人用的，簡(jiǎn)單就行了。如果我把這些放在要點(diǎn)中，其他人可以分叉并更新它們，我們可能會(huì)有更好的書(shū)簽。

使用加載項(xiàng)在整個(gè)web上進(jìn)行持久更改。

我們大多數(shù)不是網(wǎng)頁(yè)設(shè)計(jì)師的人不想要多個(gè)瀏覽器的麻煩。我們也不希望我們的鏈接被JavaScript片段弄得亂七八糟。我要說(shuō)的是，我不是在寫(xiě)你自己的插件，而是用現(xiàn)有的插件來(lái)增強(qiáng)你的網(wǎng)絡(luò)體驗(yàn)。

問(wèn)題

當(dāng)我第一次開(kāi)始使用Reddit和Imgur我發(fā)現(xiàn)他們的畫(huà)廊編輯很困難。我本可以停止使用這些工具，但是我需要找到另一個(gè)在線服務(wù)并上傳我的媒體。而且，我可能會(huì)忘記并返回Imgu，并且無(wú)法瀏覽我自己的內(nèi)容。我的解決方案是在控制臺(tái)和頁(yè)面檢查器中四處游玩，看看我是否能從他們的服務(wù)中得到我想要的東西。

右擊，然后單擊“檢查元素”，立即查看網(wǎng)頁(yè)的結(jié)構(gòu)。

大約五分鐘后，我注意到大圖片和小縮略圖之間的細(xì)微差別。我需要更大的圖片，這樣我就可以看到我在拖什么，并建立一些敘事順序。

解

我想出的代碼比較簡(jiǎn)單，只有七行。重點(diǎn)不是寫(xiě)最少的代碼，甚至是最干凈的代碼，而是簡(jiǎn)單地完成任務(wù)：開(kāi)火忘記！

(function(jQuery) {
 jQuery('.sortable-image img, .sortable-image').css({width:'auto',height:'auto'})
 jQuery('.sortable-image img').each( function(e,elem) {
 var fixedImg = jQuery(this).attr('src').replace('s.png','.png');
 jQuery(this).attr( 'src', fixedImg );
 });
})(jQuery);

首先，我告訴網(wǎng)頁(yè)刪除高度和寬度限制，然后循環(huán)遍歷每個(gè)可排序的圖像，并替換部分文件名。它不是最干凈的代碼；它依賴(lài)于Imgu的DOM結(jié)構(gòu)保持不變，并擁有jQuery庫(kù)，但是它的思想是獲得所需的東西，這樣您就可以繼續(xù)了。而且，它比向開(kāi)發(fā)團(tuán)隊(duì)發(fā)送電子郵件以更改每個(gè)人的體驗(yàn)要有效得多，因?yàn)槟l(fā)現(xiàn)它很難使用。

我對(duì)此使用了一個(gè)外接程序，據(jù)我所知，它并不是嚴(yán)格意義上的OpenSource(盡管如果您能夠找到ChromiumUser-profile文件夾，您確實(shí)可以訪問(wèn)代碼)[用戶(hù)JavaScript和CSS]但是它允許您做您想做的事情，甚至可以實(shí)現(xiàn)腳本在特定URL或URL模式上運(yùn)行的規(guī)則。

(請(qǐng)注意，Imgu不再使用相同的DOM，因此上面的代碼不再工作了。對(duì)于您以這種方式發(fā)布的大部分代碼來(lái)說(shuō)，這是正確的，并且將繼續(xù)如此。它不是為建立一個(gè)帝國(guó)而設(shè)計(jì)的，只是為了讓你的生活變得單調(diào)乏味。

創(chuàng)作加載項(xiàng)

我想要討論的最后一個(gè)主題是如何創(chuàng)建您自己的附加組件。我將重點(diǎn)關(guān)注ChromiumAd-ons，因?yàn)槲覍?duì)這些插件有最豐富的經(jīng)驗(yàn)，但是您可以在Web上找到Firefox和其他支持瀏覽器的鏈接。

您還可能想要做一些雄心勃勃的事情，比如向所有頁(yè)面添加鍵盤(pán)快捷鍵，其中包含前面的鏈接或屏蔽網(wǎng)絡(luò)上特定的仇恨言論。您可以通過(guò)為Web使用或創(chuàng)作附加組件來(lái)完成此操作(如果瀏覽器允許)。

首先，您需要一個(gè)文件夾來(lái)存放您的文件。

mkdir -p ~/projects/addon-name

一旦您有了放置文件的位置，打開(kāi)您最喜歡的編輯器并創(chuàng)建兩個(gè)文件：manifest.json和content.js(第二個(gè)文件是特定于JS加載項(xiàng)的，它只是我為基于內(nèi)容的JS使用的命名約定)。

Manifest.json

這個(gè)文件的代碼是任何鉻添加的最重要的部分.它基本上指導(dǎo)插件的工作方式和時(shí)間。創(chuàng)建這些專(zhuān)業(yè)不屬于本文的范圍，正如本文所做的那樣。創(chuàng)建Firefox擴(kuò)展

{ "manifest_version": 2, "name": "Whatever you want to call the plugin", "description": "A brief description of what the plugin does. I prefer the GNU philosophy of do one thing well", "version": "2.0", "content_scripts": [ { "matches": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_end" } ] }

這只是告訴瀏覽器在讀取所有方案(http：、https：等)的每個(gè)網(wǎng)頁(yè)時(shí)，在所有路徑上運(yùn)行content.js。

Content.js

你在你的content.js與您在網(wǎng)頁(yè)上放置的任何代碼相同。為了瀏覽圖庫(kù)，我使用了我的朋友Barry生成的一段代碼，它使用了一個(gè)名為相冊(cè)速遞(它是為Windows 7編寫(xiě)的)的舊軟件。

document.addEventListener('keyup', function(k) { switch(k.code) { case "ArrowRight": document.querySelector('.nav.controls .link.next').click(); break; case "ArrowUp": document.querySelector('.nav.controls .link.up').click(); break; case "ArrowLeft": document.querySelector('.nav.controls .link.prev').click(); // window.history.back(); // The software Barry uses actually doesn't think to generate "prev" links, so we have to be creative break; default: console.log("Key Pressed:", k); } });

從這里：

導(dǎo)航到chrome://extensions/在你的瀏覽器里

加載解壓擴(kuò)展按鈕鉻。

導(dǎo)航到保存擴(kuò)展的文件夾

最后，單擊“打開(kāi)”。

瀏覽鉻擴(kuò)展名文件的路徑。

包起來(lái)

我希望您喜歡閱讀這篇文章，并且它幫助您在不為每個(gè)人更改代碼的情況下處理軟件項(xiàng)目。如果您只是進(jìn)入JavaScript，在構(gòu)建您自己的體驗(yàn)之前進(jìn)行實(shí)驗(yàn)，這將幫助您了解哪些模式和方法最適合您。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

最新評(píng)論