สร้าง Chrome Extension ของตัวเองกัน !

ก่อสร้าง Chrome Extension ของตนเองห้าม !Developer Team BorntoDev Co., Ltd. Love8 Share Tweet Google Chrome Extension คืออะไร ?แปลความเฉพาะเลยก็ตกว่าส่วนขยายหรือว่าบทเสริมสิ่งของ Chrome นั่นเอง เพราะเป็นโปรแกรมแห่งหนประกอบด้วยมากหลายปฏิรูปคว้าทำเอาวางเพื่อให้โหลดเอาจรใช้งานกับดักเเสื้อชั้นในเซอร์ Chrome นั่นเอง ประการร่างกายแห่งหนแหล่ๆคนควรเคยชินใช้คืนหรือไม่ก็เคยชินเห็นมาก็ลงความว่า extension จำพวก Ad Block แห่งหนเอาไว้เบ้าโฆษณาการเปล่าจ่ายขึ้นผีบกเวียนสมัยเข้าไปเว็บต่างๆนั่นเอง ซึ่งธุรกิจสิ่งของ Extension ตรงนั้นก็หลากหลายได้เท่าที่หลายพัฒนาจักสร้างสรรค์ออกมานั่นเอง Chrome เว็บสโตร์พิสูจน์ทำโปรเจค Spoil Shield ห้ามคนแห่งหนกดเข้ามาอ่านถึงนี้ก็อาจแจ้งจากนั้นดุอิฉันจักลงมาทำ Chrome Extension ห้าม โปรเจคแห่งหนเราจักสร้างกักคุมแห่งวันนี้มีชื่อเสียงว่า “Spoil Shield” มีเก็บเพื่อจะรักษาเราจากการถูกสปอยล์นั่นเอง บางท่านอาจจะยังโง่จักวาจาตรงนี้ “สปอยล์” ตรงนั้นถ้าหากแปลความเฉพาะติดสอยห้อยตามวาจาแห่งภาษาอังกฤษจักหมายถึง “ทำเอาชำรุดทรุดโทรม,ทำเอาห่วย,ทำร้าย,โอ๋กระเป๋าแห้งเสียมนุช” เป็นต้น (https://dictมันสมองlongdoมันสมองcom/search/spoil) ซึ่งณบริบทแห่งหนชาวโซเขียลอย่างอิฉันๆใช้กักคุมนั้นก็คือการยกมาเนื้อเรื่องประธานหรือว่าวาระสุดท้ายของหนังหรือละครมาเฉลย ทำให้งานที่จะไปดูตรงนั้นเปล่าสนุก เปล่าลุ้นประการแห่งหนควรนั่นเอง เหตุฉะนี้วันนี้ดีฉันลงมาป้องกันตัวเองจากการถูกสปอยล์กันส่วนประกอบสำคัญChrome Extension ตรงนั้นเกี่ยวข้องกอปรสำคัญๆสิงสู่ 3 แฟ้มข้อมูลพร้อมกันเช่น manifestมันสมองjson – เก็บเจาะจงประกาศรากฐานสรรพสิ่ง extensionscript.js – ส่วนแห่งเป็นอัลกอริทึมๆสรรพสิ่ง extensionstylesมันสมองcss – เอาไว้ประดับประดาเค้าหน้าจ่ายสวยหรูเริ่มก่อสร้างแฟ้มข้อมูลห้ามมาริเริ่มขนมจากก่อสร้างโฟลเดอร์เกี่ยวกับหยุดแฟ้มข้อมูล entension ของดีฉันกับรั้งขึ้นด้วย text editor แห่งหนอิฉันแม่นยำได้มาเลย ในที่นี้ตะขอใช้คืนดำรงฐานะ Visual Studio Code นะครับผม จากนั้นก่อสร้างแฟ้มข้อมูล ทั้ง 3 แฟ้มข้อมูลข้างบนจ่ายครบ manifestมันสมองjson “manifest_version”: 2, “name”: “Spoil Shield”, “version”: “0.0.0.1”, “content_scripts”: [ “matches”: [““], “js”: [“scriptมันสมองjs”], “css”: [“stylesมันสมองcss”] ] วางกับ Chromeแค่เราประกอบด้วยรหัสแห่ง manifest.json แค่นี้ก็สมรรถวางเข้าที่ Chrome คว้าแล้ว เพราะว่ากดแห่งหนเมนูแห่งครอบครองจุด 3 วงกลมมุมขวาบนของ Chrome -> เครื่องมือเพิ่มเติม (More Tools) -> ส่วนขยาย (Extensions) หรือก็อปลิงค์ตรงนี้เจียรเหยาะแห่งทางเข้าออก url ตกลง -> chrome://extensions/เข้าไปแล้วจะพบกับดักเค้าหน้าจัดแสดง extension แห่งหนเราวางเอาไว้แล้ว ปันออกดีฉันทำการถกโหมดหลายปฏิรูปซอฟต์แวร์ทางแข็งทักษิณบนบาน เมื่อรั้งขึ้นต่อจากนั้นจะมีปุ่มเพิ่มพูนลงมาอีก 3 ปุ่มลงความว่า “โหลดบทเสริมสถานที่ถลายแฟ้มแล้ว”, “เรือแพคส่วนคลาย” และ “อัปเดต”ประดิษฐาน Spoil Shield สรรพสิ่งดีฉันพร้อมด้วยการกดแห่ง “โหลดส่วนขยายสถานที่แตกแฟ้มข้อมูลแล้ว” จากนั้นเลือกสรรแห่งโฟลเดอร์สถานที่ดีฉันก่อสร้างเอาไว้คว้าเลย ก็จะมองเห็นแหวมีชื่อเสียง Spoil Shield เพิ่มพูนลงมาณตารางส่วนขยายสถานที่ตั้งสุภาพอ่อนโยนจากนั้น แม้ว่าอีกทั้งใช้งานไม่ได้หนอ ก็ก็เพราะว่าเรายังไม่ทันการได้เขียนโค้ดอย่างไรเข้าเกินเช่นไรแหละ!ทำงานสลักรหัสกักคุมเถิดที่คราวนี้อิฉันจะมาหลบสปอยล์ Avengers กัน ผิวหนังอาจเก่าแก่แล้ว เสียแต่ว่าบางท่านก็อาจจะยังไม่ไหวดูก็ได้หนอ พางเหยาะรหัสไม่กี่ทอผ้าบรรทัดตรงนี้เข้าก็เป็นอันใช้งานคว้าscript.js// ประกาศตัวดัดแปลงไว้ผิเผชิญ spoil จะคว้ารุ่งเช้าสั่งสอน let spoilFound = false; // เรียกฟังก์ชันเหตุด้วย highlight ถ้อยคำแห่งหนเราหลบซ่อนสปอยล์อยู่ // เพราะว่าโยน html body เข้าไปตรวจดูทั่วก้อนเลย highlightSpoil(documentมันสมองbody) // การทำงานทั้งเพเหยาะเก็บณฟังก์ชันตรงนี้ function highlightSpoil(element) // ถ้า element ไรมี element แยกย่อยชั้นในส่งเข้าแห่งฟังก์ชันของอิฉันอีก if (elementมันสมองhasChildNodes()) elementมันสมองchildNodesมันสมองforEach(replaceText); else if (element.nodeType === TextมันสมองTEXT_NODE) // ไม่มีเงินประทั่วพบเห็นเนื้อตัวแห่งหนดำรงฐานะ text ถึงเข้าไปตรวจระดับถัดไป // ตรวจสอบที่ text นั้นๆดุมีถ้อยคำดุ avengers อยู่รึเปล่า if (elementมันสมองtextContent.match(/avengers/gi)) // ผิพบเห็นปุบปับก็ส่ง alert บอกทันที พร้อมทั้งเปลี่ยนค่า spoilFound = true จักได้มาห้ามครั้งเดียวเมื่อ if(!spoilFound) spoilFound = true; alert(“ชาคริตสปอยล์นะจ๊ะ”); // ก่อสร้าง span element ขึ้นลงมาใหม่และเรียก class แหว avengers จักได้ยกมาเจียรใส่สีณ css ได้ let newElement = document.createElement(‘span’) newElementมันสมองinnerHTML = element.textContentมันสมองreplace(/(avengers)/gi, ‘$1‘) elementมันสมองreplaceWith(newElement) stylesมันสมองcss/* พอกพูน highlight สีเหลืองกับคลายสัดส่วนตัวเขียน */ .avengers background-color: yellow; font-size: 150%; ตั้งต่อจากนั้นทดลองใช้งานจริงๆพอเขียนธุรกิจสุภาพจึ่งตั้งนวชาตซ้ำนึง เพราะว่าต้องลบออกวัตถุโบราณออกเจียรก่อนกำหนด แล้วก็พิสูจน์เข้าเว็ตอนี่มีถ้อยคำแหว avengers ห้ามมองดูพ้นชนิดจำเดิมเกิน ผิเผชิญถ้อยคำแหว avengers อยู่ที่หน้าเว็บจักประกอบด้วย alert ขึ้นลงมาข้างบนตั้งแต่เข้าไปแห่งหน้าตานั้นๆเลยผิคลึง “กระฉอกลง” ต่อจากนั้นอีกต่างหากมองดูเว็บนั้นทาบก็จักเหลือบเห็นถ้อยคำดุ avengers สถานที่ไม่ผิดย้ำสีเหลืองด้วยกันคลายโย่งขึ้น จ่ายอิฉันคว้าตื่นเหตุที่บริเวณนั้นคว้านั่นเองได้ผลสุภาพอ่อนโยนจากนั้นกับ Chrome Extension แห่งเราก่อเองกับหัตถ์ ซึ่งอันนี้เป็นเพียงแค่แบบอย่างเพื่อจะเป็นเหตุให้เหลือบเห็นแหวเลี่ยนสร้างด้วยกันใช้งานได้มาธุรกิจขนาดไร ใครจักนำเจียรดัดแปลงอย่างไรก็ลองทำโจ้ดูกักคุมคว้าครับผมอ๋อ Extension สถานที่เราเขียนนี่ก็นำเจียรประดิษฐานที่ Microsoft Edge ได้พร้อมด้วยหนอเพราะเค้าสร้างลงมาปันออกรับ Chrome Extention ได้มาตั้งแต่ต้นไม้พ้น ระยะนี้ Microsoft Edge กำลังมาแรง ใครใช้คืนอยู่ก็เจริญรอยตามบทความนี้ได้เหมือนกันนะExtension แห่งหนประดิษฐานณ Microsoft Edgeถ้าคุณสนใจพัฒนา สตาร์กรองัพ แอปพลิเคชัน กับ เทคโนโลยีสรรพสิ่งตนเอง ?อย่ารอคอยช้า ! ทำความเข้าใจทักษะข้างดิจิทัลเพื่อที่จะอัพเกรดความสามารถสิ่งของเธอ ริเริ่มตั้งแต่ฐานราก พร้อมทำแน่นอนแห่งแนวทางคอร์สออนไลน์วันนี้ Advance Problem Solving ฿2,590.00 ฿2,090.00฿2,590.00 ฿2,090.00Add to cart Basic Motion Graphic & Animation ฿1,990.00 ฿1,290.00฿1,990.00 ฿1,290.00Add to cart Complete Arduino For Beginner ฿3,290.00 ฿1,990.00฿3,290.00 ฿1,990.00Add to cart COMPLETE ARDUINO FOR BEGINNER WITH ELECTRO KIT I ฿5,180.00 ฿2,590.00฿5,180.00 ฿2,590.00Add to cart