productivityPal

ผลผลิต

วิดีโอสาธิต: https://drive.google.com/file/d/1iezmnusv8vklilecnj1s7k58cvgdxvu5/view

คำอธิบาย:

พันธมิตรที่เพิ่มประสิทธิภาพที่จะช่วยให้คุณนำความตระหนักกลับมาสู่ชีวิตของคุณและยุติการติดวิดีโอสั้น ๆ และการเลื่อนที่ไม่มีที่สิ้นสุด

1. วิธีดาวน์โหลด

หลังจากที่คุณดาวน์โหลดไฟล์ของโครงการมุ่งหน้าไปยังการตั้งค่าส่วนขยายเบราว์เซอร์และตรวจสอบให้แน่ใจว่าตัวเลือกนักพัฒนาเปิดใช้งาน ถ้าเป็นปุ่มที่เรียกว่า "โหลดแพ็ค" จะปรากฏขึ้นให้คลิกที่มันจากนั้นเลือกไฟล์ของโครงการ

2. วิธีใช้

. การปิดกั้นวิดีโอสั้น ๆ

extensin มีเครื่องตรวจจับวิดีโออัตโนมัติ TI ตรวจสอบวิดีโอในเว็บไซต์และค้นหาทิศทางของมันหากสั้นกว่านั้น 2m เว็บไซต์จะถูกบล็อก

ข. บล็อกเว็บไซต์

คุณสามารถเพิ่มเว็บไซต์ใด ๆ ที่คุณต้องการลงในรายการบล็อกเขียน URL เว็บไซต์ใน "https://website.com" หรือ "https://www.website.com" จากนั้นกดเพิ่ม; หากคุณต้องการลบเว็บไซต์ของรายการบล็อกเพียงคลิกลบ

ค. บล็อกตัวอย่าง

คุณสามารถเปลี่ยนตัวอย่างบล็อกในการตั้งค่าได้เช่นกัน คุณจะมีอินพุตสามอินพุตสำหรับข้อความที่สองสำหรับภาพ (ควรเป็น URL ของภาพ) และสุดท้ายคือสีของข้อความโปรดทราบว่าคุณสามารถเติมเต็มและปล่อยให้ส่วนที่เหลือว่างเปล่า

d. บล็อกการรีเซ็ตตัวอย่างบล็อก

หากคุณยุ่งกับพรีวิวบล็อกของคุณเพียงกดรีเซ็ตและคุณก็ดีทั้งหมด

3. เทคโนโลยี

. HTML

หรือที่รู้จักกันในชื่อ Hyper Text Mark Up Languge มันถูกใช้ในโครงการนี้เพื่อสร้างป๊อปอัปและการสร้างภาพบล็อกที่ปรากฏขึ้นเมื่อเว็บไซต์ถูกบล็อก

ข. CSS

ยังรู้ว่าเป็นแผ่นสไตล์แบบเรียงซ้อนกันมันถูกใช้สำหรับจัดแต่งทรงผม HTML (ป๊อปอัปและภาพบล็อก)

ค. JS

ยังเป็นที่รู้จักกันในนาม JavaScript มันถูกใช้ในการขยายเพื่อ manupilate html และ css เพิ่มว่ามันเป็นหน้าที่ในการตรวจจับวิดีโอสั้น ๆ และเว็บไซต์ที่ผู้ใช้ทำ + มันรับผิดชอบในการดำเนินการเช่นกัน

4. API's

. chrome api

Chrome API มีประโยชน์ในสิ่งต่าง ๆ แต่ในโครงการนี้ onlu chrome.storage ใช้งาน (เพิ่มเติมในภายหลัง)

5. ไฟล์และการจัดการโครงการ

5.1 popup.html

ไฟล์นี้มี UI ทั้งหมดของส่วนขยายที่เริ่มต้นก่อน (ส่วนแรก) พร้อมกับบัญชีดำ ul (รายการ Unorderd) ซึ่งมีเว็บไซต์ที่ถูกบล็อกทั้งหมดในส่วนเดียวกันมีแบบฟอร์มที่คุณสามารถเพิ่มเว็บไซต์ใหม่เพื่อปิดการใช้งาน ในส่วนที่สองคุณจะเห็นตัวอย่างของภาพบล็อกมีรูปแบบของอินพุตสามตัวแรกสำหรับข้อความที่สองสำหรับภาพย้อนหลังและที่สามสำหรับสีข้อความแบบฟอร์มจะจบลงด้วยปุ่มส่งคุณสามารถดูได้ว่าภาพบล็อกเป็นอย่างไรในตอนท้ายของส่วนที่คุณสามารถเห็นปุ่มรีเซ็ตที่ใช้ในกรณีที่คุณทำภาพบล็อก

5.2 popup.css

ตอนนี้ผู้ใช้ของเราสามารถเห็น UI แต่มันดูน่าเกลียดคือ popup.css เราแค่จัดสไตล์ทุกรายการที่มีไดนามิกมากที่สุดเท่าที่จะเป็นไปได้

5.3 popup.js

เรามี UI ที่ดูยอดเยี่ยม แต่ไม่ได้ผล: | ไฟล์เริ่มต้นด้วยการเริ่มต้นตัวแปรโดยการนำเข้าข้อมูลที่เราต้องการสำหรับ chrome.Storage API หากไม่มีอะไรใน API นั้นเราจะเพิ่มข้อมูลเริ่มต้นหลังจากนั้นเรามีฟังเหตุการณ์ที่จะบล็อก JS จากการทำงานเว้นแต่ป๊อปอัพ ไม่ว่าจะเป็น URL ที่ถูกต้องแล้วจะลบ HTTPS และ WWW หากมีมันเสริมว่า chrome.storage api ในภายหลังเรามีเหตุการณ์อื่น lister สำหรับเมื่อปุ่มลบ cliked มัน gest url whish จะถูกเก็บไว้ใน ID (". ถูกแมปไป - " bc ids ไม่สามารถมีจุดได้ รายการเหตุการณ์สำหรับ Forn อื่น ๆ (Custinuzng IMG Block) มันใช้อินพุตทั้งสามถ้าอินพุตเป็นสตริงที่ว่างเปล่าแล้วมันก็ไม่ได้รวมไว้หลังจากนั้นเราเพิ่มข้อมูลใหม่ลงใน Chrome.Storage และผู้ฟังเหตุการณ์สุดท้ายที่ดีสำหรับปุ่มรีเซ็ต

5.4 index.css

เป็นหน้าที่ในการจัดแต่งทรงผมภาพบล็อก

5.5 index.js

นี่คือไฟล์ที่สำคัญที่สุดในโครงการทั้งหมดมันเริ่มต้นด้วยการเริ่มต้นข้อมูล (Blacklist และ Block IMG) มันจะเริ่มตรวจสอบทุก ๆ 1 วินาทีหาก ​​URL หรือ PATH เปลี่ยนไปหากมันทำงานฟังก์ชั่นที่เรียกว่าแอป () แอพจะตรวจสอบว่าเว็บไซต์เป็นบัญชีดำหรือไม่ เราตรวจสอบว่าวิดีโอนั้นสั้นกว่านั้น 2m (120s) หรือไม่ถ้าเราเรียก Blocksite () และเรากลับมาอีกครั้งหากไม่มีการส่งคืนเราตรวจสอบว่าเว็บไซต์นี้เป็น Tiktok หรือกางเกงขาสั้น YouTube หากเป็นเราโทรบล็อก ()

และนั่นคือวิธีที่เราประหยัดผลผลิตของคุณภายใต้ฝากระโปรง

ขอบคุณสำหรับการใช้ ProductionPal

ผลิตโดย Houssem, GitHub: Houssemdegachi