world wide wishlist
1.0.0
WwwishList เป็นส่วนขยายของ Chrome ที่สามารถบันทึกความปรารถนาจากเว็บไซต์ใด ๆ บนเว็บไปยังที่เก็บข้อมูลท้องถิ่นของเบราว์เซอร์ Chrome ข้อมูลของคุณยังคงเป็นส่วนตัวอย่างสมบูรณ์เนื่องจาก
ส่วนขยายได้รับการปล่อยตัวในปัจจุบันและจะเผยแพร่สู่สาธารณะอย่างสมบูรณ์เมื่อเพื่อนของฉันทดสอบเป็นเวลา 1-2 เดือน
สำหรับคำอธิบายโดยละเอียดเพิ่มเติมโปรดดู Chrome StorePage
ด้านล่างคุณจะพบภาพรวมโดยย่อเกี่ยวกับการทำงานภายในสิ่งที่วางแผนไว้และหากคุณต้องการเป็นผู้สนับสนุนเอกสารและใบอนุญาตบางอย่าง
หัวใจของ wwwishlists คือป๊อปอัพ (HTML, คอนโทรลเลอร์และมุมมอง) พร้อมกับมีดโกน
มีดโกนรหัสเข้าสู่เว็บไซต์จากจุดที่เปิดป๊อปอัปเพื่อส่งคืนภาพ ฉันลองคว้าราคา แต่ฉันได้เรียนรู้อย่างรวดเร็วว่าราคามักจะไม่มากไปกว่าฟิลด์ข้อความ (หรือหลาย) ภาพจะถูกกรองเล็กน้อยเพื่อลบภาพที่ไม่ใช่ภาพผลิตภัณฑ์แน่นอน ฉันได้ตัดสินใจที่จะฉีดสิ่งนี้ลงใน iframe ทุกหน้าบนหน้าเพราะฉันพบปัญหาในเว็บไซต์ Amazon.de หากคุณรู้ว่าเหตุใดจึงมีปัญหานั้นโปรดทำให้วันของฉันและบอกฉัน เมื่อผู้ใช้ป้อนข้อมูลและบันทึกทั้งหมดภาพที่เลือกจะถูกทาสีเป็นผืนผ้าใบหดเป็น 200x200 พิกเซลและแปลงเป็นข้อมูล Base64 เนื่องจาก API ส่วนขยาย Chrome อนุญาตให้ใช้ไฟล์ JSON ขนาดใหญ่หนึ่งไฟล์สำหรับการจัดเก็บในท้องถิ่น หากกระบวนการนี้ทำงานลงใน CORS ออก URL ภาพจะถูกรักษาไว้แทน
ฉันไม่ได้วางแผนการอัปเดตฟีเจอร์ขนาดใหญ่ใด ๆ ฉันสนใจในเว็บไซต์ใด ๆ ที่ส่วนขยายของฉันไม่สามารถดำเนินการได้ สิ่งต่อไปที่ฉันอาจจะเขียนคือการทดสอบหน่วยที่เหมาะสมสำหรับฟังก์ชั่น ฉันทำการทดสอบในขณะที่ได้รับทุกอย่างเพื่อทำงานและเสียใจที่ไม่ได้ทำการทดสอบเทียมโดยอัตโนมัติที่ฉันเขียนขึ้นในช่วงเวลานั้น ฉันต้องการประหยัดราคา/สกุลเงินที่ดีกว่า (ตอนนี้มันเป็นแค่สตริง) แต่จะมีความสุขกับที่ฉันต้องการใช้ประโยชน์จากมันซึ่งหมายความว่าฉันอาจต้องการความสามารถในการเพิ่มรายการทั้งหมดในสิ่งที่อยากได้ทั้งหมด และสำหรับสิ่งนั้นฉันต้องเรียก API ตัวแปลงสกุลเงิน ฟีเจอร์ขนาดใหญ่อื่น ๆ ที่ฉันพลาดเป็นวิธีที่ง่ายในการแบ่งปันที่ไม่เกี่ยวข้องกับฉันที่ใช้เซิร์ฟเวอร์
หากคุณต้องการทำงานกับคุณสมบัติใหม่โปรดเพิ่มปัญหา GitHub ฉันต้องการทำงานร่วมกับคุณเพื่อที่จะอนุมัติคำขอดึงของคุณในที่สุด หากคุณเพียงแค่ต้องการแก้ไขข้อผิดพลาดหรืออัปเดตคำขอดึงเอกสารจะยินดีต้อนรับสุดยอด หากคุณต้องการสร้าง/ส้อมจากโครงการนี้: โครงการทั้งหมดนี้ได้รับการปล่อยตัวภายใต้ GPL 2 ฉันเลือก GNU เพื่อให้รหัสไม่น่าสนใจสำหรับการค้าโดยไม่ จำกัด การแบ่งปันและการเปลี่ยนแปลงที่ไม่ใช่เชิงพาณิชย์ หากคุณต้องการความช่วยเหลือ แต่ไม่รู้อะไรเลยดูข้างบนในส่วนที่วางแผนไว้
ในการตั้งค่าโครงการบนเครื่องของคุณคุณต้องมี NPM 10.5 หรือใหม่กว่า เมื่อคุณมีรหัสรัน
npm install
เพื่อติดตั้ง Bulma และ Node-sass ที่ระบุไว้ใน package.json หากคุณต้องการสร้างไฟล์ Bulma ใหม่จากการเปลี่ยนแปลง SASS ของคุณเพียงแค่รัน
npm css-build
หรือถ้าคุณต้องการให้สิ่งนี้เกิดขึ้นโดยอัตโนมัติในขณะที่คุณกำลังทำงานกับ Sass Run
npm start
เพื่อสร้าง bulma อย่างต่อเนื่อง
ในการเพิ่มส่วนขยาย Chrome นี้ไปยังร้านค้า Chrome ของคุณให้คลิกไอคอนปริศนาที่ด้านบนขวา -> จัดการส่วนขยาย -> เปิดโหมดนักพัฒนา -> โหลดที่ไม่ได้บรรจุและเลือกโฟลเดอร์ World Wide Wishlist ในไดเรกทอรีของคุณ
และดังนั้นคุณจึงติดตั้งเวอร์ชันนักพัฒนาของคุณแล้ว
chrome storage api เป็นสิ่งชั่วร้ายเพราะมันอนุญาตให้คุณจัดเก็บไว้ในไฟล์. json ซิงเกิ้ลขนาดใหญ่เท่านั้น ไฟล์นี้สามารถเข้าถึงได้ผ่านเครื่องมือ dev แต่ที่สำคัญกว่านั้นใน StorAgetEmplate.json คุณสามารถดูโครงสร้าง DB ได้
ที่เก็บข้อมูลนั้นสามารถเข้าถึงได้จากรุ่นและ DatabaseHandling เท่านั้น
ขณะนี้ฉันไม่เชื่อว่าผู้คนจะต้องการมีส่วนร่วมดังนั้นตอนนี้ฉันจะไม่อธิบายทุกฟังก์ชั่น แต่โครงสร้างของสิ่งที่เกิดขึ้นมากขึ้น หากคุณต้องการทำอย่างนั้นโปรดแจ้งให้เราทราบและฉันยินดีที่จะอธิบายสิ่งที่คุณไม่เข้าใจ (และเขียนเอกสารที่ละเอียดยิ่งขึ้น)
ฉันส่วนใหญ่ทำตามรูปแบบ MVC ในรหัส เพื่อสรุปทุกหน้ามีคอนโทรลเลอร์และมุมมองในขณะที่ทุก datapoint มีโมเดล แต่ละ รุ่น มีหน้าที่รับผิดชอบการกระทำของ CRUD (สร้างการปรับปรุงการอัพเดท) การกระทำที่เป็นของมัน แต่ละ มุมมอง จะแสดงข้อมูลหรือดึงข้อมูลจากผู้ใช้เท่านั้น คอนโทรลเลอร์ แต่ละตัวรอการกระทำของผู้ใช้และเรียกร้องตามมุมมองและโมเดลเพื่อทำงานตามลำดับ การกำหนดเวอร์ชัน จะดำเนินการตามความหมายเวอร์ชัน 2.0.0
สำหรับตอนนี้โครงสร้างโปรแกรมมีดังนี้:
ในการติดตั้งหรืออัปเดต background.mjs เรียก dbmanager.mjs เพื่อตั้งค่าฐานข้อมูล นอกเหนือจากนั้นพื้นหลัง MJS ทำให้รายการเมนูบริบทเกิดขึ้นที่อาศัยอยู่ในเมนูไอคอนส่วนขยายคลิกขวา
เรียกจาก background.mjs ในการติดตั้งเพื่อตั้งค่าพื้นที่เก็บข้อมูลท้องถิ่น JSON เพื่อให้ DB ทำงานได้ หากคุณต้องการเปลี่ยนฟังก์ชั่นของโครงสร้าง DB การอพยพในการอัปเดตก็จะเกิดขึ้นที่นี่
ที่นี่ข้อ จำกัด ทั้งหมด (ค่าต่ำสุดและสูงสุด) สำหรับค่าฐานข้อมูลมีชีวิตอยู่
ส่วนขยายใช้ UUID V7 ซึ่งหมายความว่า ID เริ่มต้นด้วยการประทับเวลา UNIX และดำเนินการต่อด้วยหมายเลขสุ่ม นี่เป็นสิ่งสำคัญสำหรับข้อมูลนำเข้าอย่างถูกต้อง (เช่นข้อมูลที่ไม่ซ้ำกันนั้นไม่ซ้ำกันจริง ๆ )
คุณเดาได้ว่าไฟล์นี้กฎวิธีการนำเข้าและส่งออกข้อมูล เป็นเหตุผลที่ส่วนขยายนี้ใช้การอนุญาตดาวน์โหลด การเข้าถึงฟังก์ชั่นการใช้งานนั้นจากหน้าการตั้งค่าเท่านั้น
ไฟล์เหล่านี้เป็นคลาสที่จัดการกับการดำเนินการ CRUD บนวัตถุที่ต้องการและสิ่งที่ปรารถนา
SettingsController.mjs ตอนนี้ทำหน้าที่เรียกใช้ฟังก์ชันการนำเข้าส่งออกเท่านั้น (รวมถึงลิงก์ปุ่ม) ขณะนี้ไม่มีการตั้งค่า แต่บางทีคุณอาจเปลี่ยนได้!
ผู้ใช้โต้ตอบกับ mywishlist.html ผ่านไฟล์ 2 ไฟล์เหล่านี้ การแก้ไข, การลบ, ยกเลิกการลบ, การเคลื่อนย้ายความปรารถนา, การสร้างสิ่งที่อยากได้เกิดขึ้นที่นี่
หากคลิกป๊อปอัพคอนโทรลเลอร์จะเรียก Scraper.mjs และด้วยข้อมูลที่มีดโกนดึงมุมมองแล้วเติมป๊อปอัปเพื่อให้ผู้ใช้สามารถตัดสินใจได้ว่าจะบันทึกภาพใดและข้อมูลที่จะเพิ่ม เมื่อผู้ใช้ทำแล้วว่ามุมมองได้รับข้อมูลนั้นแปลงภาพที่เกี่ยวข้องเป็น Base64 และตอบกลับไปยังคอนโทรลเลอร์เพื่อบันทึก
มีดโกนรหัสเข้าสู่เว็บไซต์จากจุดที่เปิดป๊อปอัปเพื่อส่งคืนภาพ ฉันลองคว้าราคา แต่ฉันได้เรียนรู้อย่างรวดเร็วว่าราคามักจะไม่มากไปกว่าฟิลด์ข้อความ (หรือหลาย) ภาพจะถูกกรองเล็กน้อยเพื่อลบภาพที่ไม่ใช่ภาพผลิตภัณฑ์แน่นอน ฉันได้ตัดสินใจที่จะฉีดสิ่งนี้ลงใน iframe ทุกหน้าบนหน้าเพราะฉันพบปัญหาในเว็บไซต์ Amazon.de หากคุณรู้ว่าเหตุใดจึงมีปัญหานั้นโปรดทำให้วันของฉันและบอกฉัน
ขอบคุณ Kjeld Schmidt ที่เป็นผู้ให้คำปรึกษาอย่างต่อเนื่องและเป็นครูผู้ป่วยที่มีความอดทนตลอดทั้งโครงการนี้ หากไม่มีคำแนะนำของคุณฉันจะไม่เริ่มเขียนโค้ด
ขอบคุณฮัดเดลที่ให้จระเข้ที่ไม่ได้พบกับภาพที่ยอดเยี่ยม
ขอบคุณเพื่อนคนอื่น ๆ ครอบครัวและอินเทอร์เน็ตคนอื่น ๆ ของฉันที่ช่วยในการทดสอบ
ต้องขอบคุณ Jason Thor Hall สำหรับการสร้างชุมชนโปรแกรมเมอร์ที่ยอดเยี่ยมและได้รับอนุญาตให้ใช้ร้านค้าพ่อค้าของเขาเป็นภาพหน้าจอการสอนของฉัน
