ความรู้พื้นฐาน
1. โครงสร้างไฟล์ปลั๊กอิน
1.1. Manifest.json
แต่ละส่วนขยาย, WebApp ที่ติดตั้งได้และ Skin มีไฟล์รายการ JSON ที่เก็บข้อมูลที่เกี่ยวข้องกับปลั๊กอินที่สำคัญ
ตัวอย่างการกำหนดค่าพื้นฐาน:
{"ชื่อ": "เบราว์เซอร์แอ็คชั่นสาธิต", "เวอร์ชัน": "1.0", "การอนุญาต": ["แท็บ", "http: //*/*/*", "https: //*/*"], "browser_action": {"default_title": "popup.html"}, "พื้นหลัง": {"หน้า": "background.html"}, "manifest_version": 2}1.2. ป๊อปอัป
หน้าต่างป๊อปอัพของปลั๊กอิน, default_popup ใน browser_action ในการกำหนดค่าข้างต้นคือหน้านี้
1.3. หน้าพื้นหลัง
แอปพลิเคชันส่วนใหญ่มีหน้าพื้นหลังเพื่อทำหน้าที่หลักของแอปพลิเคชัน
1.4. สคริปต์เนื้อหา
สคริปต์เนื้อหาสามารถเปิดใช้งานการโต้ตอบระหว่างแอปพลิเคชันและหน้าเว็บซึ่งหมายถึงสคริปต์ JavaScript ที่สามารถทำงานภายในหน้าเว็บที่เบราว์เซอร์โหลด คุณสามารถนึกถึงสคริปต์เนื้อหาเป็นส่วนหนึ่งของหน้าเว็บไม่ใช่ส่วนหนึ่งของแอปพลิเคชันที่อยู่ใน
2. การโต้ตอบระหว่างไฟล์
ฟังก์ชั่นในหน้าพื้นหลังสามารถเรียกได้โดยตรงในหน้าต่างป๊อปอัพ
สคริปต์เนื้อหาสามารถอ่านและแก้ไขแผนผัง DOM ของหน้าเว็บปัจจุบันได้ แต่ไม่สามารถแก้ไขแผนผัง DOM ของหน้าพื้นหลัง (พื้นหลัง) ของแอปพลิเคชันที่อยู่ได้
การโต้ตอบระหว่างสคริปต์เนื้อหาและแอปพลิเคชัน: คุณสามารถส่งข้อความถึงกันและกัน
3. ฉีดไฟล์ js (สคริปต์เนื้อหา) ลงในหน้าเว็บ:
วิธีที่ 1: กำหนดค่าในไฟล์ manifest.json:
"content_scripts": [{"matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}]วิธีที่ 2 ผ่านทาง Executescript ():
ฉีดสคริปต์ JavaScript ลงในหน้าเพื่อดำเนินการ
chrome.tabs.executecript (จำนวนเต็ม tabid, รายละเอียดวัตถุ, ฟังก์ชั่นการโทรกลับ) chrome.tabs.executecript (tabid, {ไฟล์: "func.js", allframes: true});ลักษณะ UI
1. การกระทำของเบราว์เซอร์:
เพิ่มไอคอนทางด้านขวาของแถบที่อยู่ของแถบเครื่องมือหลักของ Chrome
หมายเหตุ: แอพแพคเกจไม่สามารถใช้การกระทำของเบราว์เซอร์
1.1. การกำหนดค่าใน manifest.json
ลงทะเบียนเบราว์เซอร์การดำเนินการ:
{"NAME": "My Extension", ... "BROWSER_ACTION": {"default_ICON": "Images/Icon19.png", // เป็นทางเลือก "default_title": "Google Mail", // เป็นทางเลือก; แสดงใน ToolTip "default_popup": "popup.html" // ตัวเลือก}, ... }1.2. คำอธิบายรายการการกำหนดค่า
(1) default_icon
ไอคอน 19 * 19px
แก้ไขฟิลด์ default_icon ในรายการของ Browser_Action หรือเรียกใช้เมธอด seticon ()
Chrome.BrowserAction.Seticon (รายละเอียดวัตถุ)
ตั้งค่าไอคอนการกระทำของเบราว์เซอร์ ไอคอนสามารถเป็นเส้นทางไปยังข้อมูลรูปภาพหรือพิกเซลที่สกัดจากองค์ประกอบผ้าใบ ไม่ว่าจะเป็นเส้นทางไอคอนหรือ imagedata ของผืนผ้าใบจะต้องระบุคุณสมบัตินี้
(2) default_title
แก้ไขฟิลด์ default_title ใน Manifest Browser_Action หรือเรียกใช้เมธอด settitle () คุณสามารถระบุสตริงที่มีการแปลสำหรับฟิลด์ default_title; คลิกสากลเพื่อดูรายละเอียด
chrome.browseraction.settitle (รายละเอียดวัตถุ)
ตั้งชื่อชื่อของการกระทำของเบราว์เซอร์ซึ่งจะแสดงในคำแนะนำเครื่องมือ
(3) ตรา
การกระทำของเบราว์เซอร์สามารถเลือกตราสัญลักษณ์ - แสดงข้อความบางส่วนบนไอคอน ป้ายสามารถอัปเดตข้อมูลแจ้งสถานะส่วนขยายขนาดเล็กสำหรับการดำเนินการเบราว์เซอร์
เนื่องจากพื้นที่ป้ายมี จำกัด จึงรองรับน้อยกว่า 4 อักขระเท่านั้น
ในการตั้งค่าข้อความตราและสีคุณสามารถใช้ setBadGetExt () และ setBadGEbackGroundColor () ตามลำดับ
chrome.browseraction.setBadgetext (รายละเอียดวัตถุ)
ตั้งค่าข้อความตราของการกระทำของเบราว์เซอร์และตราแสดงบนไอคอน
SetBadgeBackgroundColorChrome.BrowserAction.SetBadGebackgroundColor (รายละเอียดวัตถุ)
ตั้งค่าสีพื้นหลังของป้าย
(4) default_popup
เคล็ดลับฟองป๊อปอัพ
แก้ไขฟิลด์ default_popup ในรายการของ Browser_Action เพื่อระบุไฟล์ HTML หรือเรียกใช้เมธอด setPopup ()
chrome.browseraction.setPopup (รายละเอียดวัตถุ)
ตั้งค่า HTML ที่แสดงในป๊อปอัพเมื่อคลิกการกระทำของเบราว์เซอร์
1.3. เคล็ดลับ
สำหรับการแสดงที่ดีที่สุดให้ทำตามหลักการต่อไปนี้:
ยืนยันว่าการกระทำของเบราว์เซอร์ใช้เฉพาะในสถานการณ์ที่เว็บไซต์ส่วนใหญ่มีข้อกำหนดการทำงาน
ยืนยันว่าการกระทำของเบราว์เซอร์ไม่ได้ใช้ในหน้าเว็บสองสามหน้าที่มีฟังก์ชั่น โปรดใช้การกระทำของหน้าสำหรับสถานการณ์นี้
ตรวจสอบให้แน่ใจว่าขนาดไอคอนของคุณควรใช้พื้นที่มากถึง 19x19 พิกเซล ไอคอนของการกระทำของเบราว์เซอร์ควรดูใหญ่กว่าและหนักกว่าไอคอนของการกระทำของหน้า
อย่าพยายามเลียนแบบไอคอนประแจของ Google Chrome ประสิทธิภาพของพวกเขาอาจเป็นปัญหาภายใต้ธีมที่แตกต่างกันและการขยายควรจะสะดุดตามากขึ้น
ลองใช้ช่องอัลฟ่าและทำให้ขอบของไอคอนของคุณราบรื่นเพราะผู้ใช้หลายคนใช้ธีมไอคอนของคุณควรทำงานได้ดีในพื้นหลังที่หลากหลาย
อย่ากระพริบไอคอนของคุณมันน่ารังเกียจมาก
2. เมนูคลิกขวา
คุณสามารถเลือกที่จะเพิ่มรายการเมนูคลิกขวาสำหรับวัตถุประเภทต่าง ๆ (เช่นรูปภาพลิงก์หน้า)
คุณสามารถเพิ่มรายการเมนูคลิกขวาหลายรายการได้ตามต้องการ รายการเมนูคลิกขวาหลายรายการที่เพิ่มในส่วนขยายจะถูกรวมเข้าด้วยกันโดยอัตโนมัติโดย Chrome และวางไว้ในเมนูรองของชื่อส่วนขยายที่เกี่ยวข้อง
เมนูคลิกขวาสามารถปรากฏในเอกสารใด ๆ (หรือเฟรมในเอกสาร) หรือแม้แต่ในไฟล์ท้องถิ่น (เช่นไฟล์: // หรือ Chrome: //) หากคุณต้องการควบคุมการแสดงผลของเมนูคลิกขวาในเอกสารที่แตกต่างกันคุณสามารถระบุ DocumentUrlPatterns เมื่อโทรสร้าง () และอัปเดต ()
2.1. การกำหนดค่าใน manifest.json
ประกาศการอนุญาต "ContentMenus" ในรายการ ในเวลาเดียวกันคุณควรระบุไอคอน 16x16 เพื่อใช้เป็นโลโก้เมนูคลิกขวา ตัวอย่างเช่น:
{"ชื่อ": "ส่วนขยายของฉัน", ... "สิทธิ์": ["บริบท"], "ไอคอน": {"16": "icon-bitty.png", "48": "icon-small.png", "128": "icon-large.png"}3. การแจ้งเตือนบนเดสก์ท็อป
แจ้งให้ผู้ใช้ทราบว่ามีบางสิ่งสำคัญเกิดขึ้น การแจ้งเตือนบนเดสก์ท็อปจะแสดงอยู่นอกหน้าต่างเบราว์เซอร์ ภาพด้านล่างแสดงผลของการแจ้งเตือน บนแพลตฟอร์มที่แตกต่างกันเอฟเฟกต์การแสดงผลของการแจ้งเตือนจะแตกต่างกันเล็กน้อย
ใช้รหัส JavaScript ชิ้นเล็ก ๆ โดยตรงเพื่อสร้างการแจ้งเตือนและแน่นอนว่ายังสามารถทำได้ผ่านหน้า HTML แยกต่างหากในแพ็คเกจส่วนขยาย
3.1. การกำหนดค่าใน manifest.json
{"ชื่อ": "ส่วนขยายของฉัน", ... "สิทธิ์": ["การแจ้งเตือน"], ... }3.2. โต้ตอบกับหน้าขยาย:
ใช้ getBackGroundPage () และ getViews () เพื่อสร้างการโต้ตอบในการแจ้งเตือนและหน้าส่วนขยาย
// โทรหาวิธีการขยายหน้าในการแจ้งเตือน ... chrome.extension.getBackgroundPage (). dothing (); // เรียกวิธีการแจ้งเตือนจากหน้าส่วนขยาย ... chrome.extension.getViews ({ประเภท: "การแจ้งเตือน"}) foreach (ฟังก์ชั่น (win)4. Omnibox
อินเตอร์เฟสแอปพลิเคชัน Omnibox ช่วยให้คุณสามารถลงทะเบียนคำหลักด้วยแถบที่อยู่ของ Google Chrome ซึ่งเรียกว่า Omnibox
ฟิลด์คำหลักของ Omnibox จะต้องรวมอยู่ในรายการ จำเป็นต้องระบุไอคอนที่มีพิกเซล 16x16 เพื่อให้แสดงในแถบที่อยู่เมื่อผู้ใช้ป้อนคำหลัก
4.1. การกำหนดค่าใน manifest.json
{"ชื่อ": "ส่วนขยาย Omnibox ของ Aaron", "เวอร์ชัน": "1.0", "Omnibox": {"คำหลัก": "Aaron"}, "ไอคอน": {"16": "16-full-color.png"} "Chrome สร้างไอคอนโดยอัตโนมัติด้วย 16x16 พิกเซลในโหมดสีเทา คุณควรจัดเตรียมไอคอนเวอร์ชันเต็มสีเพื่อให้สามารถใช้ในสถานการณ์อื่น ๆ ได้
5. หน้าตัวเลือก
เพื่อให้ผู้ใช้ตั้งค่าส่วนขยายของคุณคุณอาจต้องระบุหน้าตัวเลือก หากคุณมีหน้าตัวเลือกลิงก์จะถูกจัดเตรียมไว้ในหน้าการจัดการส่วนขยาย Chrome: // ส่วนขยาย คลิกลิงก์ตัวเลือกเพื่อเปิดหน้าตัวเลือกของคุณ
5.1. การกำหนดค่าใน manifest.json
{"NAME": "My Extension", ... "OPTIONS_PAGE": "OPTIONS.HTML", ... }6. เขียนทับหน้าเฉพาะ
การใช้หน้าอื่นคุณสามารถแทนที่หน้าเว็บเฉพาะบางส่วนในโครเมี่ยมโดยค่าเริ่มต้นและใช้หน้าเว็บที่ได้รับจากส่วนขยายแทน
6.1. การกำหนดค่าใน manifest.json
{"ชื่อ": "ส่วนขยายของฉัน", ... "chrome_url_overrides": {"pagetooverride": "mypage.html"}, ... }7. การกระทำของหน้า
ใช้การกระทำของหน้าเพื่อวางไอคอนในแถบที่อยู่
หากคุณต้องการให้ไอคอนส่วนขยายสามารถมองเห็นได้เสมอให้ใช้การกระทำของเบราว์เซอร์
แอปพลิเคชันแพคเกจไม่สามารถใช้การกระทำของหน้า
7.1. การกำหนดค่าใน manifest.json
{"ชื่อ": "ส่วนขยายของฉัน", ... "page_action": {"default_icon": "icons/foo.png", // เป็นทางเลือก แสดงใน ToolTip "default_popup": "popup.html" // ตัวเลือก}, ... }7.2. คำอธิบายรายการการกำหนดค่า
เช่นการกระทำของเบราว์เซอร์การกระทำของหน้าสามารถมีไอคอนข้อความแจ้งและป๊อปอัป แต่ไม่มีป้าย
ใช้วิธีการแสดง () และซ่อน () เพื่อแสดงและซ่อนการกระทำของหน้า โดยค่าเริ่มต้นการดำเนินการของหน้าจะถูกซ่อนไว้ เมื่อคุณต้องการแสดงคุณจะต้องระบุหน้าแท็บที่ไอคอนอยู่ ไอคอนจะยังคงปรากฏอยู่จนกว่าหน้าแท็บจะปิดหรือเริ่มแสดง URL อื่น (เช่น: ผู้ใช้คลิกที่การเชื่อมต่อ)
7.3. เคล็ดลับ
ใช้การกระทำของหน้าสำหรับไม่กี่หน้าเท่านั้น
อย่าใช้สำหรับหน้าส่วนใหญ่ใช้การกระทำของเบราว์เซอร์แทนหากฟังก์ชั่นต้องการ
อย่าปล่อยให้ไอคอนปรากฏในภาพเคลื่อนไหวเสมอเมื่อมันโอเคมันจะน่ารำคาญมาก
8. หัวข้อ
ชุดรูปแบบเป็นส่วนขยายพิเศษที่สามารถใช้ในการเปลี่ยนลักษณะที่ปรากฏของเบราว์เซอร์ทั้งหมด ชุดรูปแบบคล้ายกับส่วนขยายมาตรฐาน แต่ชุดรูปแบบไม่สามารถมีรหัส JavaScript หรือ HTML
8.1. การกำหนดค่าใน manifest.json
{"เวอร์ชัน": "2.6", "ชื่อ": "ธีม camo", "Theme": {"images": {"Theme_frame": "images/theme_frame_camo.png", "Theme_frame_overlay": "Themages/Theme_frame_stripe.png" ธีม " "Theme_ntp_background": "images/theme_ntp_background_norepeat.png", "Theme_ntp_attribution": "images/atetribution.png"}, "colors": {"frame": [71, 105, 91], "toolbar": [207, 221, 221, 192] [36, 70, 0], "ntp_section": [207, 221, 192], "button_background": [255, 255, 255]}, "Tints": {"ปุ่ม": [0.33, 0.5, 0.47]} "