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

การสร้างแอปพลิเคชันสำหรับ Google Chrome

1. ดาวน์โหลดไฟล์เก็บถาวรด้วยเทมเพลตส่วนขยายจากลิงก์นี้

2. แตกไฟล์ไว้ที่ใดก็ได้ที่สะดวกสำหรับคุณ มีไฟล์อยู่ข้างใน รายการ.jsonและไอคอน ไอคอน.png.

3. เปิดไฟล์ รายการ.jsonในสมุดบันทึกและแก้ไขเนื้อหา คุณต้องป้อนชื่อไซต์ของคุณในบรรทัดที่ 2 คำอธิบาย (สูงสุด 132 อักขระ) ในบรรทัดที่ 3 และที่อยู่ไซต์ในบรรทัดที่ 5 และ 7 บันทึกการเปลี่ยนแปลงที่ทำ

4. เปลี่ยนไอคอนจากไฟล์เก็บถาวรเป็นรูปภาพของคุณเองในรูปแบบ PNG ขนาด 128*128

การสร้างส่วนขยายสำหรับ Google Chrome

แม้ว่าส่วนขยายจะแตกต่างจากแอปพลิเคชันอย่างมีนัยสำคัญ แต่อัลกอริธึมการประกอบก็ไม่ซับซ้อนมากนัก

1. รับเทมเพลตส่วนขยายจากลิงค์นี้

2. แตกไฟล์ เปิดไฟล์ manifest.json ใน Notepad และวางชื่อเว็บไซต์ของคุณ คำอธิบายสั้นๆ และชื่อของหน้าต่างส่วนขยาย (บรรทัดที่ 2, 3 และ 8)

3. เปิดไฟล์ labnol.jsและระบุที่อยู่ของฟีด RSS ของเว็บไซต์ของคุณ

4. แทนที่ไอคอนจากไฟล์เก็บถาวรด้วยรูปภาพของคุณเองในรูปแบบ PNG ขนาด 128*128

สิ่งตีพิมพ์

ส่วนขยายและแอปพลิเคชันที่เราสร้างขึ้นสามารถใช้งานได้สองวิธี หากคุณเป็นเจ้าของเว็บไซต์และต้องการดึงดูดผู้ใช้เพิ่มเติมให้เข้ามา คุณสามารถเผยแพร่ผลงานของคุณใน Chrome เว็บสโตร์ ในการดำเนินการนี้ ให้แพ็กส่วนขยายและไฟล์ส่วนเสริมลงในที่เก็บถาวรของไฟล์เหล่านั้น ไปที่หน้าแดชบอร์ดของ Chrome และอัปโหลดงานของคุณไปที่ Google Store ที่นี่คุณจะถูกขอให้อัปโหลดภาพหน้าจอ ระบุคำอธิบายเพิ่มเติม และระบุพารามิเตอร์อื่นๆ หน้านี้เป็นภาษารัสเซีย ดังนั้นคุณจึงเข้าใจได้ง่าย โปรดทราบว่าหากต้องการเผยแพร่ส่วนขยาย คุณต้องเป็นเจ้าของที่ได้รับการยืนยันของไซต์ที่คุณสร้างส่วนขยาย นอกจากนี้ คุณจะต้องป้อนค่าธรรมเนียมแรกเข้า 5 ดอลลาร์ต่อการตีพิมพ์

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

เมื่อใช้วิธีการที่นำเสนอ เจ้าของเว็บไซต์หรือบล็อกจะสามารถสร้างและวางส่วนขยายที่มีแบรนด์สำหรับทรัพยากรของตนในไดเร็กทอรีส่วนขยายของเบราว์เซอร์ Google Chrome สิ่งนี้จะช่วยให้ผู้เยี่ยมชมรับทราบข้อมูลอัปเดตล่าสุด ซึ่งจะดึงดูดผู้เยี่ยมชมไซต์ของคุณมากขึ้น และเพิ่มความนิยม

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

ส่วนขยายที่เราจะพัฒนาตลอดบทความนี้สามารถพบได้ใน Google Chrome เว็บสโตร์ โดยมีข้อแตกต่างเพียงอย่างเดียวคือมีฟังก์ชันขั้นสูง นอกจากนี้ยังมีซอร์สโค้ดบน GitHub อีกครั้งโดยมีข้อแม้ว่าทุกสิ่งที่เขียนด้วย CoffeeScript และที่นี่เรื่องราวจะถูกเขียนด้วย JavaScript อย่างไรก็ตาม ฉันไม่ใช่แฟนหรือผู้สนับสนุน CoffeeScript แต่มันค่อนข้างน่าสนใจและมีประโยชน์ - ฉันแนะนำให้คุณลองใช้

หากคุณเคยพิจารณาถึงแนวคิดในการสร้างส่วนขยายสำหรับ Chrome, Firefox, Maxthon และเบราว์เซอร์อื่น ๆ คุณอาจสังเกตเห็นแล้วว่าความพยายามขั้นต่ำที่คุณต้องทุ่มเทคือสำหรับ Chrome คุณสามารถตรวจสอบได้โดยดูเอกสารประกอบของเบราว์เซอร์ที่เกี่ยวข้อง

การกำหนดปัญหา

การเขียนส่วนขยายเริ่มต้นด้วยคำอธิบายและการตั้งค่างานที่จะแก้ไข เนื่องจากฉันเป็นเจ้านายของตัวเองและอาจพลาดกำหนดเวลาได้บ่อยเท่าที่ต้องการ ฉันจึงไม่จำเป็นต้องเขียนข้อกำหนดทางเทคนิค แค่เข้าใจว่า:

• ส่วนขยายควรซ่อนความคิดเห็นทั้งหมดบนโซเชียลเน็ตเวิร์ก VK
• ส่วนขยายจะต้องสามารถแสดงความคิดเห็นได้
• ส่วนขยายจะต้องสามารถแสดงความคิดเห็นในหน้าใดหน้าหนึ่งได้

เมื่อมองแวบแรก ทุกอย่างเป็นเรื่องง่ายและเราสามารถทำได้ อย่างไรก็ตาม ภายในกรอบของบทความ เราจะใช้เฉพาะสองประเด็นแรกเท่านั้น

ฉันคาดการณ์ว่าจะมีคำถามที่มีเนื้อหาดังนี้: “ทำไมต้องซ่อนความคิดเห็น ในเมื่อนี่คือประเด็นสำคัญของโซเชียลเน็ตเวิร์ก!” เป็นคำถามที่ยุติธรรมซึ่งสมควรได้รับคำตอบโดยละเอียด:

สถานการณ์ปรากฏว่าเมื่อเร็ว ๆ นี้เมื่อฉันเห็นความคิดเห็นใน VK ฉันอยากจะยกมือไหว้ผู้แสดงความเห็น ฉันสมัครรับข้อมูลหน้าสาธารณะต่างๆ จำนวนมาก เนื้อหาเฉพาะเรื่อง (การพัฒนาเว็บ) และไม่มากนัก และไม่ว่ามันจะดูแปลกแค่ไหน ฉันก็กลายเป็นกลุ่มที่มีเนื้อหาที่น่าสนใจที่สุดสำหรับฉัน ไม่ใช่แมว (ในกรณีของฉันคือแพนด้า) ฉันไม่เคยเห็นการแสดงความคิดเห็นที่ไม่เป็นมืออาชีพและน่าเกลียดมากมายขนาดนี้มาก่อน และพวกเขาก็คิดที่จะโต้แย้งด้วยซ้ำ นอกจากนี้ ความคิดเห็นในฟีดข่าวยังดูไม่สวยงามนัก โดยทั่วไปพูดและทำ

กรอบการขยายตัว

ความประหลาดใจที่น่ายินดีที่สุดสำหรับฉันคือในช่วงเริ่มต้นของการเดินทางเราได้รับการต้อนรับจากลักษณะเชิงพรรณนาของการกระทำ พูดง่ายๆ ก็คือ เราต้องอธิบายแอปพลิเคชันของเรา สิทธิ์และความสามารถของมัน - ไฟล์ manifest.json ใช้สำหรับสิ่งนี้

ก่อนอื่น คุณต้องกรอกข้อมูลในช่องที่ต้องกรอกสามช่อง:

( "manifest_version": 2, // เริ่มต้นด้วย Chrome 18 ชุด 2 มิฉะนั้น 1 (ไม่รองรับของเก่าดังกล่าว) "name": "ส่วนขยายของฉัน", // ชื่อส่วนขยาย "version": "versionString" // เวอร์ชันส่วนขยาย )

หากชื่อทุกอย่างชัดเจนและเวอร์ชันรายการนั้นง่ายกว่า คุณจะต้องพิจารณาเวอร์ชันส่วนขยายให้ละเอียดยิ่งขึ้น

ดังนั้นเราทุกคนคุ้นเคยกับความจริงที่ว่าเวอร์ชันของบางสิ่งประกอบด้วยตัวเลขสามตัวคั่นด้วยจุด - Major.Minor.Patch (ตัวเลขความหมาย) ในเวลา npm, bower และความสนุกสนานอื่นๆ การสนทนาจะสั้น: จะเป็นเช่นนี้หรือไม่เลยก็ได้ แต่ Google เสนอตัวเลือกต่อไปนี้:

"เวอร์ชัน": "1" "เวอร์ชัน": "1.0" "เวอร์ชัน": "2.10.2" "เวอร์ชัน": "3.1.2.4567"

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับฟิลด์ทั้งหมดในไฟล์ Manifest ได้จากเอกสารประกอบ

ในกรณีของเรา ไฟล์ Manifest จะมีลักษณะดังนี้:

( "manifest_version": 2, "ชื่อ": "__MSG_app_name__", "short_name": "VKCommentBlocker", "คำอธิบาย": "__MSG_app_description__", "เวอร์ชัน": "0.1.0", "default_locale": "ru", " การอนุญาต": [ "activeTab" ], "browser_action": ( "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" ), "icons": ( "16": "icon_16.png", "48 ": "icon_48.png", "128": "icon_128.png" ), "พื้นหลัง": ( "ถาวร": false, "หน้า": "พื้นหลัง.html" ), "content_scripts": [ ( "ตรงกัน" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "สไตล์ /commentblocker_on.css" ] )

จากสิ่งที่ไม่เคยพิจารณามาก่อน

• __MSG_key__ คือการดำเนินการของ Chrome ในด้านการทำให้แอปพลิเคชันเป็นสากล (i18n) สามารถใช้ได้ทั้งในไฟล์ Manifest และในไฟล์อื่นๆ (แม้แต่ CSS)
• web_accessible_resources - อาร์เรย์ของเส้นทางทรัพยากรที่จะใช้ในบริบทของหน้าเว็บในภายหลัง หากไม่มีการระบุเส้นทางในนั้น จะไม่สามารถใช้สิ่งใดบนหน้าเว็บไซต์ได้หากคาดว่าจะเกิดพฤติกรรมดังกล่าว

ทรัพยากรการขยายตัว

ข้อดีอย่างมากสำหรับ Chrome กรรมคือตอนนี้เราสามารถเปิดใช้งานส่วนขยายได้แน่นอน หากทรัพยากรทั้งหมดที่ระบุใน manifest.json ถูกสร้างขึ้น

ฉันไม่คิดว่ามันคุ้มค่าที่จะมุ่งเน้นไปที่สิ่งที่อยู่ในไฟล์ commentblocker.css และ commentblocker_on.css ฉันจะให้เฉพาะอันแรกซึ่งแสดงรายการตัวเลือกทั้งหมดที่มีความคิดเห็น:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link ( การมองเห็น: ซ่อนไว้ !important; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pv_comments, #pv_comments_header, #pv_your_comment ( จอแสดงผล: ไม่มี !import ant; การมองเห็น: ซ่อนเร้น ! สำคัญ; ) body:after ( ตำแหน่ง: แก้ไขแล้ว; เนื้อหา: "__MSG_mode_enable__"; บน: 5px; ขวา: 5px; ขยาย: 6px 12px; สีพื้นหลัง: #ffc; เส้นขอบ: 1px solid #ddd; z-index: 9999 ; )

ในไฟล์ commentblocker_on.css อย่างที่คุณอาจเดาได้ว่าสิ่งที่ตรงกันข้ามจะเป็นจริง โปรดทราบว่าใน CSS ฉันใช้บรรทัดที่มีเนื้อหาคีย์ภาษา: "__MSG_mode_enable__" ถึงเวลาสร้างไฟล์ที่จะจัดเก็บคีย์เหล่านี้

ในรากของส่วนขยายของเรา เราสร้างไดเร็กทอรี _locales และไดเร็กทอรี en และ ru ที่ซ้อนอยู่ภายใน ต่อไป เราจะอธิบายคีย์ของเราในไฟล์ Messages.json

( "app_name": ( "message": "VK Comment Blocker" ), "app_description": ( "message": "วิธีที่สะดวกในการซ่อนความคิดเห็นในฟีดข่าวและกลุ่ม" ), "browser_action": ( "message" ": " สลับประเภทความคิดเห็น" ), "mode_enable": ( "message": "ไม่มีความคิดเห็น!" ), "mode_disable": ( "message": "พร้อมความคิดเห็น!" ) )

นอกจากช่องข้อความแล้ว ยังมีช่องอื่นๆ ที่คุณสามารถเรียนรู้ได้จากเอกสารประกอบ

ตอนนี้เราสร้างไฟล์ background.html อันดับแรกดังนี้:

พื้นหลัง

ทุกอย่างที่นี่เหมือนกับใน HTML ทั่วไป - ไม่มีอะไรผิดปกติ อย่างไรก็ตาม คุณไม่จำเป็นต้องสร้างไฟล์ background.html เนื่องจากไฟล์จะสร้างขึ้นโดยอัตโนมัติตามฟิลด์ใน manifest.json

เปิดตัวส่วนขยาย

คุณสามารถเรียกใช้ส่วนขยายได้โดยไม่ต้องเขียน JavaScript แม้แต่บรรทัดเดียว ในการดำเนินการนี้คุณต้องไปที่เมนู:

• การตั้งค่าและการจัดการ Google Chrome (แฮมเบอร์เกอร์)
• เครื่องมือเพิ่มเติม
• ส่วนขยาย
• ทำเครื่องหมายที่ช่องถัดจาก "โหมดนักพัฒนาซอฟต์แวร์"
• ดาวน์โหลดส่วนขยายที่คลายการแพ็ก
• เลือกโฟลเดอร์ที่มีนามสกุล

โหลดส่วนขยายและปรากฏในเมนู ใช่ ใช่ นี่คือ "B"

ดูเหมือนว่าส่วนขยายที่เราเพิ่งสร้างขึ้นไม่มีอะไรอยู่ในหัว (ไม่มีเหตุผล) และความคิดเห็นทั้งหมดบนหน้าโซเชียลเน็ตเวิร์กที่มีตัวอักษร "B" จะถูกซ่อนไว้แล้ว คำตอบอยู่ใน manifest.json โดยที่เราระบุไว้ในฟิลด์ "content_scripts": () ว่าหน้าใด (http://vk.com/* และ https://vk.com/*) ไฟล์ commentblocker.css จะ ถูกรวมไว้โดยอัตโนมัติ ซึ่งจะซ่อนความคิดเห็นทั้งหมด ฉันแนะนำให้คุณอ่านเพิ่มเติมเกี่ยวกับรูปแบบทางคณิตศาสตร์ รูปลักษณ์ภายนอกดูเรียบง่าย แต่ใต้ฝากระโปรงหน้ารถนั้นแทบจะเป็นสีเทา พร้อมด้วยกระดิ่งและนกหวีดทั้งหมด

ดังนั้นโดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว เราก็มีส่วนขยายที่ดำเนินงานหลักที่ได้รับมอบหมายอยู่แล้ว

ฟื้นการขยายตัว

ยังคงต้องทำจุดที่สองของงานให้เสร็จสิ้นนั่นคือการใช้ความสามารถในการแสดงความคิดเห็น กล่าวโดยสรุป เราต้องพุชไฟล์ commentblocker_on.css ซึ่งจะแทนที่กฎของไฟล์ commentblocker.css และที่นี่ JavaScript อันยิ่งใหญ่ของเราก็รีบเข้ามาช่วยเหลือเรา

จำสิ่งที่ฉันพูดเกี่ยวกับ background.html ได้ไหม ใช่ ใช่ เกี่ยวกับความจริงที่ว่ามันไม่จำเป็นต้องถูกสร้างขึ้นมา มาเปลี่ยน manifest.json กันเล็กน้อย:

... "พื้นหลัง": ( "ถาวร": เท็จ "สคริปต์": [ "สคริปต์/commentblocker.js" ] ), ...

เพิ่งเชื่อมต่อไฟล์ JavaScript ไม่มีอะไรพิเศษ. ไปที่ไฟล์นี้กันเลย

คุณไม่สามารถใส่ JS ลงในเพจได้ และปัญหาเดียวกันนี้ไม่ได้เกิดขึ้นเฉพาะกับสคริปต์เท่านั้น ดังนั้นเราจึงจำเป็นต้องใช้การสั่งรันสคริปต์แบบพิเศษ

ขั้นแรกคุณต้องเพิ่มตัวจัดการเหตุการณ์การคลิกลงในไอคอนส่วนขยาย:

Chrome.browserAction.onClicked.addListener(function(tab) ( chrome.tabs.executeScript(tab.id, ( รหัส: "(" + toggleComments.toString() + ")();" )); ));

โดยที่toggleCommentsเป็นฟังก์ชันที่จะแทรกไฟล์ CSS ของเราลงในเพจ:

Var toggleComments = function() ( var extensionLink; (document.getElementById("extension") == null) ? (extensionLink = document.createElement("link"), extensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), extensionLink.id = "extension", extensionLink.type = "text/css", extensionLink.rel = "stylesheet", document.getElementsByTagName("head").appendChild(extensionLink)) : (document. getElementsByTagName("หัว").removeChild(document.getElementById("ส่วนขยาย"))) );

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

อย่างไรก็ตาม มีกิจกรรมไม่มากนักที่ครอบคลุมความต้องการที่แตกต่างกัน ตัวอย่างเช่น มีเหตุการณ์ดังกล่าว:

• onCreated - การสร้างแท็บ
• onUpdated - อัปเดตแท็บ
• onRemoved - ปิดแท็บ

เป็นที่น่าสังเกตว่าเหตุการณ์ onUpdated ถูกเรียกสองครั้ง:

• อัพเดตหน้า;

ใน StackOverflow พวกเขาแนะนำให้ตรวจสอบสถานะหน้า:

Chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) ( if (changeInfo && changeInfo.status === "สมบูรณ์") ( ... ) ));

ตอนนี้เมื่อคุณคลิกที่ไอคอน ไฟล์สไตล์จะถูกเชื่อมต่อซึ่งจะแสดงความคิดเห็น และการคลิกที่ไอคอนอีกครั้งจะเป็นการซ่อนอีกครั้ง

ข้อสรุป

อย่างไรก็ตาม เป็นเรื่องที่ควรค่าแก่การกล่าวถึงส่วนขยาย VK Comment Blocker เวอร์ชันเต็มของฉันซึ่งมีอยู่ใน

ผู้มีอำนาจมากที่สุดในพื้นที่นี้คือ Wladimir Palant (เขาเขียน AdBlock Plus), ... ส่วนขยายสำหรับ Chrome เขียนได้ง่ายกว่า Firefox สิ่งที่น่าสนใจคือส่วนขยายที่ได้รับความนิยมมากที่สุดสำหรับ Chrome คือ "Tyuryaga VKontakte" (ตามสถิติของ Yandex)

ความท้าทายคือการพัฒนาส่วนขยายที่จะตอบสนองต่อหน้า HTML บางหน้าที่เปิดในเบราว์เซอร์ ตัวอย่างเช่น แก้ไขโค้ด HTML ของหน้าไซต์เพื่อให้ใช้งานไซต์นี้ได้สะดวกยิ่งขึ้น
โซลูชันได้รับการทดสอบบน Google Chrome 24.x และ Chromium 6.x (Debian 6.0.6, amd64)

การแก้ปัญหา

สรุปคำถามหลักที่เกิดขึ้นระหว่างการเขียนส่วนขยาย crx

จะลงทะเบียนส่วนขยายได้อย่างไร?

ตั้งเวลาได้อย่างไร?

จะลงทะเบียนส่วนขยายได้อย่างไร?

สำหรับนามสกุลขั้นต่ำ 4 ไฟล์ก็เพียงพอแล้ว:

128.png พื้นหลัง js content.js manifest.json

manifest.json อยู่ที่ไหน:

( "manifest_version": 2, "ชื่อ": "ส่วนขยาย DomainCheck", "เวอร์ชัน": "0.1", "พื้นหลัง": ( "สคริปต์": ["พื้นหลัง.js"]), "content_scripts": [ ( "ตรงกัน ": [ "*://*/*" ], "js": [ "content..png" ) // no web_accessible_resources )

ไฟล์ background.js มีโค้ดที่ดำเนินการเมื่อเบราว์เซอร์เริ่มทำงาน ในสคริปต์นี้ คุณสามารถ "แฮงค์" ตัวจัดการการโหลดเนื้อหาเอกสารได้ (document.location.href)

Chrome เองจะสร้าง _generated_พื้นหลัง_page.html:

หากต้องการสื่อสารระหว่าง background.js และสคริปต์เนื้อหา คุณสามารถใช้ข้อความ (คำขอ/ข้อความ) และ chrome.extension.getBackgroundPage() ดูเพิ่มเติมที่ภาพรวมสถาปัตยกรรมของส่วนขยาย Chrome มันบอกว่า "สคริปต์เนื้อหาคือ JavaScript บางตัวที่ทำงานในบริบทของหน้าที่โหลดลงในเบราว์เซอร์"

หมายเหตุ: เป็นการยากที่จะแก้ไขข้อบกพร่องของหน้าพื้นหลัง (พื้นหลัง js) ใน Chromium เนื่องจากไม่มีความสอดคล้องกัน แท็บบนหน้า "ส่วนขยาย" ในโหมดนักพัฒนาซอฟต์แวร์

จะตรวจสอบ URL ปัจจุบัน ตัดแต่ง และคำนวณแฮชได้อย่างไร

วิธีติดตั้งตัวจัดการบน DOMContentLoaded มีอธิบายไว้ใน Developer.chrome.com ดูเพิ่มเติมที่เอกสารเกี่ยวกับหน้าพื้นหลัง (พื้นหลัง.js)

หากต้องการฝังโค้ด HTML ลงในเพจ เราสามารถใช้คำแนะนำจากบทความเกี่ยวกับHabré (ดูการกล่าวถึงเอกสารตัวแปรโกลบอลที่นั่น) แต่เราจำเป็นต้องเปรียบเทียบ URL ปัจจุบันกับรายการด้วย

document.location.href เลิกใช้แล้วใช่ไหม

ตัวอย่างจาก stackoverflow.com ในการรับชื่อโดเมนแบบเต็ม:

var url = "http://www.domain.ru/tmp/file.txt?abc=1&cde=2#123" var getLocation = function(href) ( var l = document.createElement("a"); l. href = href; กลับ l; ); var l = getLocation (URL); การแจ้งเตือน (l.ชื่อโฮสต์)

คุณสามารถเลือกโดเมนย่อยระดับที่ 2 ได้ดังนี้:

var l = getLocation (URL); var d = l.ชื่อโฮสต์; ฟังก์ชั่น cutd(str) ( var re = /.*?\.([\w\d-\u0100-\uffff-\.]+\.[\w\d-\u0100-\uffff-\.]+ )/; return str.replace(re,"$1"); ) alert(cutd(d));

(ดูเคล็ดลับใน stackoverflow.com)

การฉีด sha1.js ...

ตั้งเวลาได้อย่างไร? ดูส่วนขยายตัวอย่าง: ตัวอย่างหน้ากิจกรรม, background.js:

chrome.alarms.create((ล่าช้าในนาที: 0.1)); chrome.alarms.onAlarm.addListener(function() ( การแจ้งเตือน("หมดเวลา!"); ));

จุดบกพร่องใน Chromium นี้ปิดแล้วเมื่อวันที่ 9 มกราคม 2013 แต่ยังไม่ปรากฏในเวอร์ชันล่าสุดสำหรับ Windows

หากคุณยังตัดสินใจที่จะใช้การเตือน "สมัยใหม่" ต่อไป วิธีการตั้งค่าตัวจับเวลาการเตือนอย่างถูกต้องตามระยะเวลา/ระยะเวลาที่กำหนดนั้นมีอธิบายไว้ใน stackoverflow.com

เพื่อให้เข้ากันได้กับเบราว์เซอร์รุ่นเก่า ควรใช้ window.setInterval() ใน background.js จะดีกว่า:

วาร์ i = 0; window.setInterval(function() ( แจ้งเตือน(i); i++), 2*1000); // เป็นมิลลิวินาที

ฟังก์ชัน setTimeout() คือ "นาฬิกาปลุก" ตัวเดียว

ปิดใช้งาน-เปิดใช้งานส่วนขยายของ Chrome เปิดตัว background.js ในรูปแบบใหม่ *) ฉันต้องตรวจสอบสิ่งเดียวกันเพื่อเข้าสู่โหมดหรือไม่? และนอนหลับ

จะดาวน์โหลด config.xml/time.txt ได้อย่างไร และจะแยกวิเคราะห์ได้อย่างไร

หากคุณเพียงแค่ดาวน์โหลดผ่าน XMLHttpRequest คุณอาจได้รับข้อความต่อไปนี้: “XMLHttpRequest ไม่สามารถโหลด http://site/config.xml ได้ Origin http://www.google.ru ไม่ได้รับอนุญาตจาก Access-Control-Allow-Origin ". ซึ่งหมายความว่าเมื่อทำการร้องขอข้ามโดเมน คุณไม่ได้เปิดใช้งานตัวเลือกสำหรับ CORS, .htaccess:

ชุดส่วนหัว Access-Control-Allow-Origin "*"

คุณสามารถอนุญาตคำขอข้ามโดเมนในส่วนขยาย Chrome และผ่านการอนุญาตใน manifest.json:

( "manifest_version": 2, ... "สิทธิ์": [ "http://site/" ],

อย่างไรก็ตาม ทั้งสองกรณีนี้ใช้ไม่ได้กับส่วนขยาย Chromium ที่คลายแพ็กแล้ว สำหรับส่วนขยายแบบแพ็กเกจ บางครั้ง Chromium เวอร์ชัน 6.0-7.0 จะแสดง "หมายเลขเวทย์มนตร์ที่ไม่ถูกต้อง" (สำหรับ Chrome ล้วนๆ จะไม่พบข้อผิดพลาดนี้)
หมายเหตุ: คุณสามารถข้ามการป้องกัน CORS ใน Chromium ได้ผ่านทางตัวเลือก --disable-web-security:

$ chromium-browser --disable-web-security http://domain/path

เพิ่มเติม: สำหรับ Chromium คุณต้องเปลี่ยนบรรทัดใน manifest.json ดังต่อไปนี้ (ระบุโดเมนอย่างชัดเจนและเพิ่มเครื่องหมายดอกจันในเส้นทาง):

( "สิทธิ์": [ "http://site/*" ],

เพื่อป้องกันไม่ให้ผู้ตรวจสอบเว็บ(?) ใน Chrome บ่นเกี่ยวกับ XMLHttpRequest() เมื่ออินเทอร์เน็ตปิดอยู่ คุณสามารถทำได้ดังนี้:

var req = โมฆะ; ลอง ( req = new XMLHttpRequest(); ) catch(err) () // ดูคำแนะนำที่ stackoverflow.com

(สิ่งนี้เขียนตามคำแนะนำจาก stackoverflow.com) ...

หากต้องการดีบักการแยกวิเคราะห์ คุณสามารถใช้ console.log("line") สตริงยอมรับการขึ้นบรรทัดใหม่โดยใช้ "\n"

การแยกวิเคราะห์ XML ลงใน JavaScript ในส่วนขยายของ Chrome ทำได้ดังนี้:

var xml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("หมดเวลา"); var หมดเวลา = ts.textContent; if (ts) (console.log("timeout="+timeout);) var ds = xml.getElementsByTagName("โดเมน"); ถ้า (ds) ( สำหรับ (var i = 0; i< ds.length; i++) { console.log("domain: "+ds[i].textContent); } }

จะใช้ตัวแปรอะตอมมิกทั่วโลกและข้อมูลตารางในส่วนขยายของ Chrome ได้อย่างไร

หากต้องการซิงโครไนซ์ข้อมูลส่วนขยายโดยใช้ Storage API คุณต้องมีเวอร์ชัน Chrome >= 20 ในรายการ (manifest.json) คุณต้องเขียนสิ่งต่อไปนี้:

"ข้อกำหนด": ["ที่เก็บข้อมูล" ]

ขณะที่พวกเขาเขียนในกลุ่ม Google "Chromium HTML5" "ฉันหันความสนใจไปที่ฐานข้อมูล Web SQL แต่ดูเหมือนว่า Web SQL จะไม่อยู่ใน "การบำรุงรักษาที่ใช้งานอยู่" อีกต่อไป ซึ่งทำให้ฉันเชื่อว่าจะถูกละทิ้งจากข้อมูลจำเพาะ HTML " ดูฐานข้อมูล W3C Web SQL หมายเหตุสำหรับรายละเอียดเพิ่มเติม คุณสามารถลองใช้แนวคิดพื้นฐาน - เพื่อขยายพื้นที่สำหรับฐานข้อมูล คุณสามารถใช้สิทธิ์: UnlimitedStorage ใน manifest.json หากต้องการใช้ "พื้นที่เก็บข้อมูลไม่จำกัด" มี API ออฟไลน์ดังต่อไปนี้: 1) แคชของแอป; 2) ระบบไฟล์; 3) IndexedDB; 4) WebSQL (เลิกใช้แล้ว) สำหรับตัวอย่างการใช้ IndexedDB ใน Chrome โปรดดู สำหรับตัวอย่างการทำงานกับ IndexedDB โปรดดูที่ gist.github.com:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("my db") req.onerror = function() ( console.log("error"); )

ตำแหน่งไฟล์ IndexedDB
Windows: C:\Users\\AppData\Local\Google\Chrome\User Data\Default\IndexedDB,
ลินุกซ์: /home//.config/google-chrome/Default/IndexedDB/chrome-xxx.indexeddb.leveldb/:

$ sudo ls -la /home/anonymous/.config/google-chrome/Default/IndexedDB/chrome-extension_ojeihbjghbabiocoglbfhdebhhckdnol_0.indexeddb.leveldb/ รวม 24 drwx------ 2 ผู้ไม่ระบุชื่อ ไม่ระบุชื่อ 4096 7 ก.พ. 03:08 drwx------ 3 ไม่ระบุชื่อ ไม่ระบุชื่อ 4096 ก.พ. 7 03:08 .. -rw-r--r-- 1 ไม่ระบุชื่อ ไม่ระบุชื่อ 285 ก.พ. 03:08 000003.log -rw-r--r-- 1 ไม่ระบุชื่อ ไม่ระบุชื่อ 16 ก.พ. 7 03:08 ปัจจุบัน -rw------- 1 ไม่ระบุชื่อ ไม่ระบุชื่อ 0 7 ก.พ. 03:08 LOCK -rw-r--r-- 1 ไม่ระบุชื่อ ไม่ระบุชื่อ 46 ก.พ. 7 03:08 LOG -rw-r --r-- 1 ไม่ระบุชื่อ ไม่ระบุชื่อ 32 ก.พ. 7 03:08 MANIFEST-000002

คุณสามารถดูตัวอย่างการใช้ IndexedDB บน ​​Mozilla Developer Network

การแทรกบันทึกจำนวนมากลงใน IndexedDB นั้นครอบคลุมอยู่ใน stackoverflow.com

หากต้องการเพิ่มรายการลงใน IndexedDB คุณต้องใช้

indexedDB.db.transaction().objectStore().put())

ในโฟลเดอร์ฐานข้อมูล IndexedDB ฐานข้อมูลเก่าจะถูกจัดเก็บเป็นไฟล์ .sst และฐานข้อมูลใหม่ (ปัจจุบัน) จะถูกจัดเก็บเป็นไฟล์ .log

setVersion() เลิกใช้แล้ว แต่มีเคล็ดลับอย่างหนึ่งที่นี่ [เกี่ยวกับ onupgradeneeded()]: ...

ตามที่ระบุไว้ในบล็อกของ Parashuram Narasimhan "สำหรับ Chrome: ในกรณีของ Chrome จะไม่เรียกใช้ฟังก์ชันที่อัปเกรดแล้ว ฟังก์ชัน onsuccess ของฐานข้อมูลจะถูกเรียก ที่นี่ มีการตรวจสอบการมีอยู่ของเมธอด setVersion หากมีวิธีการอยู่ และเวอร์ชันที่ระบุมากกว่าเวอร์ชันฐานข้อมูล ระบบจะเรียกใช้เมธอด setVersion ความสำเร็จของการเรียกคำขอของ setVersion จะเรียกใช้เมธอด onupgradeneeded ของผู้ใช้ด้วยธุรกรรมเวอร์ชัน เมื่อวิธีการเสร็จสมบูรณ์ versionTransaction จะกระทำโดยการปิดฐานข้อมูล ฐานข้อมูลถูกเปิดอีกครั้งด้วยเวอร์ชันล่าสุด และสิ่งนี้จะถูกส่งผ่านไปยังความสำเร็จที่กำหนดโดยผู้ใช้" (ดังนั้นเพื่อเรียก onupgradeneeded() ฉันทำ db.setVersion("3"))

วิธีดึงข้อมูลใน content.js:

dbreq.onupgradeneeded = function(event) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["test_db"], "อ่านอย่างเดียว"); var store = tx.objectStore("สิ่งที่ต้องทำ");

หากต้องการเปิดฐานข้อมูล ให้ใช้โค้ดจาก axemclion+jepp (ฟังก์ชัน openReqShim)

เมื่อเราเปิดฐานข้อมูล IndexedDB ที่ไม่มีอยู่ มันจะถูกสร้างขึ้นด้วยหมายเลขเวอร์ชัน version = 0 ในกรณีนี้ onupgradeneeded() และ onsuccess() จะถูกเรียกตามลำดับ ครั้งแรกที่เราเรียก onupgradeneeded() เวอร์ชันจะมีอยู่แล้ว = 1 เมื่อเราเปิด [ฐานข้อมูลที่มีอยู่] เป็นครั้งที่สอง onupgradeneeded() จะไม่ถูกเรียกอีกต่อไป และหมายเลขเวอร์ชัน = 1 (?ไม่เพิ่มขึ้น) เฉพาะ dbreq เรียกว่า .onsuccess()

อีกหนึ่งสิ่ง. มันบอกว่า "ด้วย Chrome ก่อนอายุ 23 ปี คุณต้องสร้างธุรกรรมดังกล่าวด้วยตนเองโดยการเรียก setVersion() - API ที่ถูกลบออกจากข้อมูลจำเพาะ สามารถดูข้อมูลจำเพาะรุ่นเก่าได้ที่: http://www.w3.org /TR/2011/WD-IndexedDB-20110419/" กล่าวคือ เพื่อหลีกเลี่ยงข้อผิดพลาด "NotFoundError: DOM IDBDatabase Exception 8" ในบันทึกของ Chrome คุณต้องเรียก setVersion()

ใน Chromium 6.0.472.63 (59945) การใช้งาน IndexedDB ไม่เสถียร ดังนั้นจึงถูกปิดใช้งานและใช้งานไม่ได้ =)

โดยทั่วไปคุณต้องใช้ background.js + iframe + แลกเปลี่ยนกับสคริปต์เนื้อหาผ่านข้อความ

รับมือเหตุการณ์เปิดเพจอย่างไร?

"content_scripts": [ ( "ตรงกัน": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_start" ) ], ...

เนื้อหา js:

document.addEventListener("DOMContentLoaded", function () ( alert("Abc "+document.location.href); ));

จะจัดรูปแบบโค้ด HTML ของหน้าได้อย่างไร? ดูการเขียนส่วนขยาย Firefox จะจัดแพ็คเกจส่วนขยายได้อย่างไรและจะวางไว้ที่ไหน?

หากต้องการวางส่วนขยายบน Chrome WebStore คุณจะต้องจ่ายค่าธรรมเนียมแรกเข้าให้กับ Google 5 ดอลลาร์ (จากนั้นคุณสามารถวางส่วนขยายจำนวนเท่าใดก็ได้) คุณสามารถชำระเงินผ่าน VISA, MasterCard, AMEX หรือ DISCOVER (นอกจากนี้เมื่อชำระเงินคุณต้องระบุที่อยู่ทางไปรษณีย์ให้ครบถ้วนและชื่อและนามสกุล)

หากต้องการวางส่วนขยาย คุณต้องมีบัญชี Google และอื่นๆ คุณจะต้องมีภาพหน้าจอและภาพโฆษณา คุณจะต้องอัปเดตโค้ดส่วนขยายด้วยตนเองผ่าน Chrome WebStore เดียวกัน (ตามที่ฉันเข้าใจ ไม่มีการอัปเดตอัตโนมัติตาม URL เช่นเดียวกับใน Firefox) ในไฟล์ manifest.json คุณต้องอัปเดตเวอร์ชันส่วนขยาย หลังจากเพิ่มไม่กี่นาที ส่วนขยายจะพร้อมใช้งานในการค้นหาส่วนขยายของ Chrome

แพ็คเกจส่วนขยายสำหรับ Linux:

#!/bin/bash 7z a -tzip ../domainck-chromium.zip ./* mv ../domainck-chromium.zip ../domainck-chromium.crx

คำสำคัญ: Chromium สร้างขึ้นสำหรับ windows HOWTO หน้าดาวน์โหลด Google Chrome ส่วนขยายตัวอย่างของ Google Chrome

มีเว็บไซต์จำนวนมากบนอินเทอร์เน็ตที่ให้ความสามารถในการเลื่อนหน้าขึ้นโดยไม่ต้องใช้เมาส์หรือแถบเลื่อน แต่ในขณะเดียวกัน ก็ยังมีไซต์ที่ไม่มีการดำเนินการดังกล่าว "ทำไมไม่ลองเขียนสคริปต์ที่จะเพิ่มปุ่มดังกล่าวในทุกไซต์ล่ะ" - ฉันคิดและลงมือปฏิบัติแล้ว สคริปต์ดังกล่าวเรียกว่าสคริปต์ผู้ใช้และมีนามสกุล *.user.js ตัวอย่างเช่น คุณสามารถอ่านได้ในHabré น่าเสียดายที่ไม่สามารถทำได้หากไม่มีข้อผิดพลาด มีความแตกต่างบางประการในการใช้งาน userjs สำหรับเบราว์เซอร์ที่แตกต่างกัน ฉันจะมุ่งเน้นไปที่การอธิบายการใช้งานสคริปต์ userjs ของเราเป็นส่วนขยายสำหรับเบราว์เซอร์ Google Chrome

รายการ.json

ไฟล์ที่จำเป็นสำหรับส่วนขยาย Google Chrome คือ รายการ.jsonซึ่งอธิบายพารามิเตอร์ เส้นทางไปยังไฟล์ภายนอก (*.js, *.css ฯลฯ) การสนับสนุนเวอร์ชัน ฯลฯ เพื่อการขยายตัว คุณสามารถอ่านเพิ่มเติมเกี่ยวกับไฟล์ได้ ในกรณีของเรา ไฟล์ manifest.json มีลักษณะดังนี้:

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "ตรงกัน": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true, "description": "ส่วนขยายสคริปต์ผู้ใช้ด้านหลังสำหรับ Google Chrome", "name": "backTopUserJS", "version": "1" )

เพื่อความสะดวก เราใช้ไลบรารี JQuery ซึ่งเราวางไว้ถัดจากไฟล์ manifest.json และไฟล์สคริปต์หลัก (ในกรณีของเราคือ backTopUserJS.user.js) เนื้อหามีดังนี้:

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @license MIT // @version 1.0 // ==/UserScript== function main() ( var disp = $(window).scrollTop () > 400 ? "block" : "none"; var $upButton = $("

"); $(document).find("body").append($upButton); $upButton.click(function () ( $("html, body").animate(( scrollTop: 0 ), "slow" ); )); $(window).scroll(function () ( if ($(window).scrollTop() > 400) $upButton.fadeIn("slow"); else $upButton.fadeOut("slow"); )); ); var script = document.createElement("script"); script.appendChild(document.createTextNode("("+ main +"))();")); (document.body || document.head | | document.documentElement).appendChild(สคริปต์);

ฉันคิดว่าสคริปต์มีความชัดเจนเพียงพอที่จะพิจารณาในรายละเอียด มีเพียง 3 บรรทัดสุดท้ายเท่านั้นที่คุ้มค่าที่จะอธิบาย อันที่จริง นี่เป็นแฮ็กเล็กๆ ที่แทรกสคริปต์ของเราลงในโค้ดของหน้าเว็บไซต์ หากท่านใดพบวิธีที่ดีกว่าคุณสามารถเขียนการแก้ไขของคุณในความคิดเห็น :)

การติดตั้งส่วนขยายในเบราว์เซอร์

คุณสามารถติดตั้งสคริปต์ที่กำหนดเองใน Google Chrome ได้เช่นเดียวกับเบราว์เซอร์อื่นๆ แต่เนื่องจาก Google ให้ความสำคัญกับความปลอดภัยของเรา สคริปต์เหล่านั้นจึงต้องรวมอยู่ในส่วนขยายของเบราว์เซอร์ มาดูการติดตั้งทีละขั้นตอนกัน

สร้างโฟลเดอร์สำหรับส่วนขยายของเราดังนี้: C:\MyChromeExtensionUserJS

เราสร้างไดเร็กทอรีของเราเองสำหรับแต่ละส่วนขยาย เช่น ในกรณีของเรา เราจะเรียกมันว่า C:\MyChromeExtensionUserJS\backTopUserJS เพิ่มไฟล์นามสกุลลงในไดเร็กทอรีนี้

ไปที่ "เกี่ยวกับเบราว์เซอร์ Google Chrome" -> แท็บ "ส่วนขยาย" หรือเขียน chrome://extensions/ ในแถบที่อยู่

ทำเครื่องหมายที่ช่อง "โหมดนักพัฒนาซอฟต์แวร์"

คลิกปุ่ม "โหลดส่วนขยายที่คลายแพ็กแล้ว" และเลือกไดเร็กทอรีของส่วนขยายของเรา คลิก "ตกลง"

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

บรรทัดล่าง

คุณสามารถดูแหล่งที่มาของสคริปต์บน GitHub สคริปต์นี้ไม่ได้อ้างว่าเป็นอุดมคติ แต่เป็นเพียงตัวอย่างและแรงผลักดันในการเขียนสคริปต์ที่คุณกำหนดเองสำหรับ Google Chrome