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

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

書簽的力量

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

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

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

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

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

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

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

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

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

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

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

問題

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

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

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

解

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

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

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

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

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

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

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

首先，您需要一個文件夾來存放您的文件。

mkdir -p ~/projects/addon-name

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

Manifest.json

這個文件的代碼是任何鉻添加的最重要的部分.它基本上指導(dǎo)插件的工作方式和時間。創(chuàng)建這些專業(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：等)的每個網(wǎng)頁時，在所有路徑上運(yùn)行content.js。

Content.js

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

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ò)展的文件夾

最后，單擊“打開”。

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

包起來

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

總結(jié)

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