Home-theater-designers
Ang feature na Inspect Element sa iyong web browser ay isang developer tool na nagbibigay-daan sa iyong baguhin ang front-end na aspeto ng isang website, kabilang ang HTML, CSS, at JavaScript, at gumawa ng mga pansamantalang pagbabago. Marami ka ring magagawa sa Inspect Element. Gayunpaman, ang lahat ng mga pagbabago ay nawala pagkatapos ng pag-refresh.
MUO Video ng araw MAG-SCROLL PARA MAGPATULOY SA NILALAMAN
Ngunit kung minsan, maaaring gusto mong panatilihin ang mga pagbabago sa loob ng mahabang panahon o magdagdag ng mga karagdagang pag-andar upang mapahusay ang karanasan ng user. Ang isang paraan upang gawing permanente ang mga pagbabago sa Inspect Element ay sa pamamagitan ng paggamit ng extension ng Tampermonkey. Hinahayaan ka nitong magdagdag ng mga custom na script sa mga web page, na ginagawang permanente ang mga pagbabago sa iyong lokal na makina.
Tingnan natin kung paano gamitin ang Tampermonkey para gawing permanente ang mga pagbabago sa inspeksyon sa iyong lokal na browser.
Ano ang Tampermonkey at Paano Mo Ito Mai-install?
Ang Tampermonkey, isang userscript manager, ay isang sikat na extension ng browser na available para sa lahat ng pangunahing web browser, kabilang ang Chrome, Edge, Opera Next, at Firefox. Hinahayaan ka nitong lumikha at magpatakbo ng mga custom at umiiral nang userscript upang baguhin ang mga web page upang ayusin o mapahusay ang mga ito.
Nagtatampok din ito ng library ng mga userscript na ginawa ng iba pang mga gumagamit ng Tampermonkey. Halimbawa, maaari mong gamitin ang userscript ng Local YouTube Downloader para mag-download ng mga video sa YouTube gamit ang Tampermonkey o manood ng mga na-flag na video sa YouTube nang hindi nagla-log in .
Pinapatakbo ng extension ang mga naka-save na userscript sa sandaling mag-load ang tinukoy na web page, kaya nagiging permanente ang mga nilalayong pagbabago.
Bago tayo magsimulang magsulat ng script, kakailanganin mong i-install ang Tampermonkey. Kaya, magsimula tayo sa pag-install ng extension:
- Pumunta sa Opisyal na pahina ng Tampermonkey . Awtomatiko nitong makikita ang iyong web browser. Kung hindi, mag-click sa anumang tab mula sa Chrome, Microsoft Edge, Firefox, Safari, at Opera, depende sa browser na iyong ginagamit.
- Nasa I-download seksyon, mag-click sa Kunin mula sa Store . Ididirekta ka sa web store ng iyong browser.
- Mag-click sa I-install upang idagdag ang extension sa iyong browser. Sundin ang anumang mga tagubilin sa screen upang makumpleto ang pag-install.
Kung hindi nakalista ang iyong browser, ngunit gumagamit ka ng Chromium browser, dapat mong mai-install ang extension na ito mula sa Tindahan ng Chrome .
Kapag na-install na, maaari kang magsimulang magsulat ng mga custom na userscript gamit ang JavaScript upang gawin ang mga nilalayong pagbabago sa anumang website. Hindi na kailangang sabihin, kakailanganin mo ng pangunahing pag-unawa sa HTML, CSS, at JavaScript upang maisulat ang userscript at gumawa ng mga pagbabago gamit ang Tampermonkey.
Para ipakita ang mga kakayahan ng Tampermonkey, susulat kami ng script para magdagdag ng button sa pagbabahagi ng WhatsApp para magbahagi ng mga link ng artikulo sa iyong mga contact sa WhatsApp.
Ano ang Dapat Isaalang-alang Bago Gumawa ng Mga Pagbabago sa Elemento ng Website
Habang gumagawa ng mga pagbabago sa anumang website, mahalagang igalang ang kanilang mga patakaran sa paggamit ng mga third-party na JavaScript. Huwag subukang magpatakbo ng mga userscript nang basta-basta sa anumang website, lalo na kapag nakikipag-ugnayan ka sa sensitibong data.
Bagama't tinutulungan ka ng Tampermonkey na baguhin ang hitsura at magdagdag ng functionality sa isang website, ang lahat ng mga pagbabago ay makikita lamang nang lokal sa iyong browser at hindi nakakaapekto sa pinagmulan.
Pagsisimula Sa Tampermonkey
Kapag naplano mo na ang mga pagbabagong gusto mong gawin sa isang web page, maaari mong simulan ang pagsulat ng iyong script. Maaaring gumawa ng mga bagong userscript mula sa toolbar o sa dashboard ng Tampermonkey.
Para gumawa ng bagong script, i-click ang Mga extension icon sa toolbar ng browser at piliin Tampermonkey . Susunod, piliin Gumawa ng bagong script . Magbubukas ito ng script editor sa dashboard ng Tampermonkey.
Ang default na header ng Tampermonkey o mga komento sa metadata ay ganito ang hitsura:
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://example.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Your code here...
})();Kasama sa mga komentong metadata na ito ang mahalagang impormasyon tungkol sa pangalan ng userscript, nilalayon na layunin, at mga pahintulot at sabihin sa Tampermonkey kung kailan ipapatupad ang script.
Para sa gabay na ito, pagtutuunan natin ng pansin ang @tugma direktiba, aka metadata na inihain. Ginagamit ng Tampermonkey ang direktiba na ito upang matiyak na ang userscript ay inilalapat lamang sa isang partikular na website o mga web page. Sa pagkakataong ito, tatakbo lang ang sumusunod na userscript sa example.com (palitan ang URL ng website ayon sa iyong kinakailangan) at lahat ng pahina nito.
Pagsusulat ng Userscript para Magdagdag ng WhatsApp Share Button
Sa dulo ng bawat artikulo ng MakeUseOf, makakahanap ka ng share widget para sa iba't ibang social media platform, maliban sa WhatsApp. Bagama't maaari mong kopyahin at i-paste ang URL, ang isang pindutan sa pagbabahagi ng WhatsApp ay kapaki-pakinabang kung madalas kang nagbabahagi ng mga artikulo sa iyong pangkat sa WhatsApp.
Maaari kang lumikha ng isang userscript sa Tampermonkey upang magdagdag ng isang pindutan ng pagbabahagi ng WhatsApp sa dulo ng artikulo. Isasama namin ang button sa umiiral nang widget ng pagbabahagi na magbibigay-daan sa iyong ibahagi ang URL ng web page sa iyong mga contact sa WhatsApp.
Magsimula tayo sa paglikha ng pangunahing pindutan ng pagbabahagi ng WhatsApp.
//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';Ngayon na mayroon na tayong pangunahing pindutan sa pagbabahagi ng WhatsApp, magdagdag tayo ng ilang estilo dito. Bibigyan nito ang button ng background at kulay ng teksto, hangganan, padding, at istilo ng cursor. Sa pamamagitan ng kaunting pag-iisip, maaari mong baguhin ang mga katangian ng button upang maayos ang hitsura.
//add styling to the button
Whatsapp_btn.style.backgroundColor = '#075E54';
Whatsapp_btn.style.color = 'white';
Whatsapp_btn.style.border = 'none';
Whatsapp_btn.style.borderRadius = '5px';
Whatsapp_btn.style.padding = '10px';
Sa handa na ang pindutan, oras na upang subukan ito. Ngunit saan mo ito ilalagay? Bilang isang karaniwang kasanayan, kadalasan ang share button ay inilalagay sa dulo ng mga artikulo.
Gayunpaman, sa pagkakataong ito, mayroon na kaming widget sa pagbabahagi sa dulo ng bawat artikulo. Kaya, mainam na gawing bahagi ng widget ang button na ito sa pagbabahagi.
Upang gawin ito, susuriin namin ang umiiral na widget ng pagbabahagi upang mahanap ang pangunahing container na naglalaman ng mga elemento ng pagbabahagi upang mahanap ito sa userscript. Sa web page, pindutin ang Ctrl + Shift + C upang buksan ang Inspect Element. Susunod, piliin ang bahagi ng widget na elemento sa pahina upang siyasatin ito.
kung paano ipasok ang isang pahalang na linya sa salita
Makikita mo na ito ay isang Pagkatapos piliin ang elemento, ipasok natin ang share button bilang isang bata dito: Pindutin Ctrl + S para i-save ang script. Kung ire-reload mo ang page, makakakita ka ng share button na ipinasok sa umiiral nang share widget. Ngunit ang pag-click dito ay walang magagawa. Para gumana ang button, gagawa kami ng function para bumuo ng WhatsApp share URL batay sa URL ng kasalukuyang page. Maaari mong gamitin ang location.href upang ibalik ang URL ng page. Susunod, magdagdag tayo ng tagapakinig ng kaganapan sa button. Kapag na-click, magbubukas ang browser ng bagong tab na may link sa pagbabahagi ng WhatsApp na hinahayaan kang gumawa ng mensahe. Kapag handa ka na ng userscript, pindutin Ctrl + S upang i-save ang mga pagbabago. Buksan ang Mga Naka-install na Userscript tab sa Tampermonkey upang tingnan ang lahat ng mga userscript na naka-install sa iyong browser. Upang makita ang userscript sa pagkilos, buksan ang target na web page. Makakakita ka ng berde Ibahagi pindutan. Ang pag-click sa pindutan ay mag-uudyok sa iyo na buksan ang WhatsApp desktop, kung mayroon kang naka-install na app. Pagkatapos ay maaari mong piliin ang contact mula sa listahan upang ipadala ang link ng artikulo. Maaari mo pang baguhin ang script upang magdagdag ng higit pang mga pagpapahusay. Halimbawa, maaari mong ipakita ang icon ng WhatsApp sa button o baguhin ang pagkakalagay nito gamit ang isang InsertAfter() function. Maaari mong paganahin, huwag paganahin, o i-edit ang mga indibidwal na userscript mula sa dashboard ng Tampermonkey. Bilang kahalili, i-click ang icon ng Tampermonkey sa toolbar upang i-disable ang lahat ng aktibong userscript nang sabay-sabay. Ang Tampermonkey ay isa sa maraming userscript manager na magagamit na nagbibigay-daan sa iyong baguhin ang mga web page upang mapahusay ang iyong karanasan sa pagba-browse. Ang mga maliliit na pagbabago ay maaaring makatulong sa mas mahusay na accessibility at ayusin ang mga maliliit na annoyance sa iyong paboritong website. Bago ka magsimulang magsulat ng script, tingnan kung mayroon nang script mula sa ibang mga user. Gayunpaman, maging maingat sa pag-install ng mga third-party na userscript mula sa hindi kilalang mga mapagkukunan upang maiwasan ang malisyosong code.const sharingDiv = document.querySelector ('div.sharing.bottom');if (sharingDiv) {
sharingDiv.appendChild(Whatsapp_btn);
}
function generateWALink() {
const pageURL = encodeURIComponent(window.location.href);
return `https://api.whatsapp.com/send?text=${pageURL}`;
}Whatsapp_btn.addEventListener('click', () => {
const whatsappURL = generateWALink();
window.open(whatsappURL, '_blank');
}); I-save at Patakbuhin ang Userscript
Ginagawang Permanenteng Inspeksyon ang Mga Pagbabago sa Element Gamit ang Tampermonkey