วิธีเขียนส่วนขยายเบราว์เซอร์ของคุณเอง [รวมโปรเจ็กต์ตัวอย่าง]

ในบทความนี้เราจะพูดถึงส่วนขยายเบราว์เซอร์ – คืออะไร ทำงานอย่างไร และคุณสามารถสร้างส่วนขยายของคุณเองได้อย่างไร

เราจะเสร็จสิ้นด้วยการเขียนส่วนขยายของเราเอง (Super Fun!) ซึ่งช่วยให้เราคัดลอกข้อมูลโค้ดไปยังคลิปบอร์ดของเราได้ด้วยการคลิกปุ่มเพียงปุ่มเดียว

หากต้องการดำเนินการต่อในบทความนี้:

• คุณต้องมีความเข้าใจพื้นฐานของ JavaScript
• คุณต้องใช้เบราว์เซอร์ Firefox (หรือเบราว์เซอร์อื่นก็ใช้งานได้)

ส่วนขยายเบราว์เซอร์คืออะไร

ส่วนขยายเบราว์เซอร์คือสิ่งที่คุณเพิ่มลงในเบราว์เซอร์ ซึ่งช่วยปรับปรุงประสบการณ์การท่องเว็บโดยขยายความจุของเบราว์เซอร์

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

วิธีเขียนส่วนขยายเบราว์เซอร์พื้นฐานของคุณเอง

มาเริ่มด้วยการเขียนส่วนขยายพื้นฐานกันก่อน

ในการเริ่มต้น เราจะสร้างโฟลเดอร์ภายในซึ่งเราสร้างไฟล์ชื่อ manifest.json .

ไฟล์ Manifest คืออะไร

ไฟล์ Manifest เป็นไฟล์ที่ต้องมีในส่วนขยายของเบราว์เซอร์ ไฟล์นี้มีข้อมูลพื้นฐานเกี่ยวกับส่วนขยายของเรา เช่น ชื่อ เวอร์ชัน และอื่นๆ

ตอนนี้อยู่ใน manifest.json ไฟล์คัดลอกตัวอย่างต่อไปนี้:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
}

วิธีการโหลดไฟล์นามสกุล

สำหรับผู้ใช้ Firefox ให้ทำตามขั้นตอนเหล่านี้:

ในแถบที่อยู่ ค้นหาสิ่งนี้:

about:debugging#/runtime/this-firefox

คุณจะเห็นตัวเลือกให้ โหลดส่วนเสริมชั่วคราว . คลิกที่ตัวเลือกนั้นและเลือก manifest.json ไฟล์จากไดเร็กทอรี

สำหรับผู้ใช้ Chrome:

ในแถบที่อยู่ค้นหาสิ่งนี้:

chrome://extensions.

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

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

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
  "content_scripts":[
    {
     "matches":["<all_urls>"],
     "js":["main.js"]
    }
  ]
}

ในโค้ดด้านบน เราได้เพิ่มสคริปต์เนื้อหาลงใน manifest.json . สคริปต์เนื้อหาสามารถจัดการ Document Object Model ของหน้าเว็บได้ เราสามารถฉีด JS (และ CSS) ลงในหน้าเว็บโดยใช้สคริปต์เนื้อหา

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

ภายในไดเรกทอรีเดียวกันสร้าง main.js ไฟล์และเพิ่มรหัสต่อไปนี้:

alert("The test extension is up and running")

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

อย่าลืมโหลดส่วนขยายซ้ำทุกครั้งที่คุณแก้ไขโค้ด

วิธีปรับแต่งส่วนขยายเบราว์เซอร์ของคุณ

ตอนนี้มาสนุกกับส่วนขยายของเรากันดีกว่า

สิ่งที่เราจะทำตอนนี้คือสร้างส่วนขยายเว็บที่เปลี่ยนรูปภาพทั้งหมดของหน้าเว็บที่เราเข้าชมเป็นรูปภาพที่เราเลือก

สำหรับสิ่งนี้ เพียงเพิ่มรูปภาพใดๆ ลงในไดเร็กทอรีปัจจุบันและเปลี่ยน main.js ไฟล์ไปที่:

console.log("The extension is up and running");

var images = document.getElementsByTagName('img')

for (elt of images){
   elt.src = `${browser.runtime.getURL("pp.jpg")}`
   elt.alt = 'an alt text'
}

มาดูกันว่าเกิดอะไรขึ้นที่นี่:

var images = document.getElementsByTagName('img')

โค้ดบรรทัดนี้เลือกองค์ประกอบทั้งหมดในหน้าเว็บด้วย img แท็ก .

จากนั้นเราวนซ้ำภาพอาร์เรย์โดยใช้ for วนซ้ำซึ่งเราเปลี่ยน src แอตทริบิวต์ของ img . ทั้งหมด องค์ประกอบไปยัง URL ด้วยความช่วยเหลือของ runtime.getURL ฟังก์ชัน

ที่นี่ pp.jpg เป็นชื่อไฟล์รูปภาพในไดเร็กทอรีปัจจุบันในอุปกรณ์ของฉัน

เราจำเป็นต้องแจ้งสคริปต์เนื้อหาของเราเกี่ยวกับ pp.jpg โดยแก้ไข manifest.json ไฟล์ไปที่:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Test",
  "content_scripts":[
   {
    "matches":["<all_urls>"],
    "js":["main.js"]
   }
  ],
  "web_accessible_resources": [
        "pp.jpg"
  ]
}

จากนั้นโหลดส่วนขยายซ้ำแล้วไปที่ URL ใดก็ได้ที่คุณต้องการ ตอนนี้คุณควรเห็นรูปภาพทั้งหมดที่เปลี่ยนเป็นรูปภาพซึ่งอยู่ในไดเร็กทอรีการทำงานปัจจุบันของคุณ

วิธีเพิ่มไอคอนในส่วนขยายของคุณ

เพิ่มรหัสต่อไปนี้ใน manifest.json ไฟล์:

"icons": {
  "48": "icon-48.png",
  "96": "icon-96.png"
}

วิธีเพิ่มปุ่มแถบเครื่องมือในส่วนขยายของคุณ

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

หากต้องการเพิ่มปุ่มแถบเครื่องมือ ให้เพิ่มบรรทัดต่อไปนี้ใน manifest.json ไฟล์:

"browser_action":{
   "default_icon":{
     "19":"icon-19.png",
     "38":"icon-38.png"
   }
  }

ไฟล์รูปภาพทั้งหมดควรอยู่ในไดเร็กทอรีปัจจุบันของคุณ

ตอนนี้ หากเราโหลดส่วนขยายซ้ำ เราควรเห็นไอคอนสำหรับส่วนขยายของเราในแถบเครื่องมือของเบราว์เซอร์

วิธีการเพิ่มเหตุการณ์การฟังสำหรับปุ่มแถบเครื่องมือ

บางทีเราต้องการทำอะไรบางอย่างเมื่อผู้ใช้คลิกปุ่ม สมมติว่าเราต้องการเปิดแท็บใหม่ทุกครั้งที่คลิกปุ่ม

สำหรับสิ่งนี้ เราจะเพิ่มสิ่งต่อไปนี้อีกครั้งใน manifest.json ไฟล์:

"background":{
        "scripts":["background.js"]
  },
  "permissions":[
      "tabs"
  ]

จากนั้นเราจะสร้างไฟล์ใหม่ชื่อ background.js ในไดเร็กทอรีการทำงานปัจจุบันและเพิ่มบรรทัดต่อไปนี้ในไฟล์:

function openTab(){
    
    var newTab = browser.tabs.create({
        url:'https://twitter.com/abhilekh_gautam',
        active:true
    })
}

browser.browserAction.onClicked.addListener(openTab)

ตอนนี้โหลดส่วนขยายใหม่!

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

โปรดทราบว่าคุณสามารถใช้ API ที่เบราว์เซอร์จัดหาให้ในสคริปต์พื้นหลัง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ API โปรดดูบทความต่อไปนี้:Javacript API

ตอนนี้เราได้เรียนรู้พื้นฐานบางอย่างของส่วนขยายเบราว์เซอร์แล้ว มาสร้างส่วนขยายที่เราในฐานะนักพัฒนาซอฟต์แวร์สามารถใช้ในชีวิตประจำวันของเรากัน

โครงการสุดท้าย

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

สาธิต

ขั้นแรก เราจะสร้างโฟลเดอร์/ไดเร็กทอรีใหม่ โดยภายในนั้นเราจะเพิ่ม manifest.json ไฟล์.

เพิ่มรหัสต่อไปนี้ในไฟล์:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"copy code",
  "content_scripts":[
    {
     "matches":["*://*.stackoverflow.com/*"],
     "js":["main.js"]
    }
  ]
}

ดูที่ matches ภายใน content script – ส่วนขยายจะใช้ได้กับโดเมนและโดเมนย่อยของ StackOverflow เท่านั้น

ตอนนี้สร้างไฟล์ JavaScript อื่นชื่อ main.js ในไดเร็กทอรีเดียวกันและเพิ่มโค้ดต่อไปนี้:

var arr =document.getElementsByClassName("s-code-block")

for(let i = 0 ; i < arr.length ; i++){
 var btn = document.createElement("button")
 btn.classList.add("copy_code_button")
 btn.appendChild(document.createTextNode("Copy"))
 arr[i].appendChild(btn)
 //styling the button
 btn.style.position = "relative"
 
 if(arr[i].scrollWidth === arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetHeight)
  btn.style.left = `${arr[i].offsetWidth - 70}px`

  else if(arr[i].scrollWidth != arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetWidth)
   btn.style.left = `${arr[i].offsetWidth - 200}px`
 else 
   btn.style.left = `${arr[i].offsetWidth - 150}px`
  
 if(arr[i].scrollHeight === arr[i].offsetHeight)
   btn.style.bottom = `${arr[i].offsetHeight - 50}px`
   
 else
   btn.style.bottom = `${arr[i].scrollHeight - 50}px`
 //end of styling the button
   
   console.log("Appended")
}

ก่อนอื่น ฉันเลือกองค์ประกอบทั้งหมดที่มีชื่อคลาส s-code-block - แต่ทำไม? เนื่องจากเมื่อฉันตรวจสอบไซต์ของ StackOverflow ฉันพบว่าข้อมูลโค้ดทั้งหมดถูกเก็บไว้ในคลาสที่มีชื่อนั้น

จากนั้นเราวนรอบองค์ประกอบเหล่านั้นทั้งหมดและต่อท้ายปุ่มในองค์ประกอบเหล่านั้น สุดท้าย เราเพียงแค่วางตำแหน่งและจัดรูปแบบปุ่มอย่างเหมาะสม (การจัดสไตล์ยังไม่สมบูรณ์แบบ – นี่เป็นเพียงการเริ่มต้น)

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

วิธีการเพิ่มฟังก์ชันให้กับปุ่ม

ตอนนี้ เมื่อคลิกปุ่ม เราต้องการให้คัดลอกข้อมูลโค้ดทั้งหมดไปยังคลิปบอร์ดของเรา ในการดำเนินการนี้ ให้เพิ่มโค้ดบรรทัดต่อไปนี้ลงใน main.js ไฟล์:

var button = document.querySelectorAll(".copy_code_button")
 button.forEach((elm)=>{
  elm.addEventListener('click',(e)=>{
    navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)
    alert("Copied to Clipboard")
  })
 })

ก่อนอื่น เราเลือกปุ่มทั้งหมดที่เราได้เพิ่มลงในไซต์โดยใช้ querySelectorAll . จากนั้นเราจะฟังเหตุการณ์คลิกทุกครั้งที่มีการคลิกปุ่ม

navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)

บรรทัดโค้ดด้านบนคัดลอกโค้ดไปยังคลิปบอร์ดของเรา ทุกครั้งที่มีการคัดลอกข้อมูลโค้ด เราจะแจ้งเตือนผู้ใช้ด้วยข้อความ Copied to clipboard และเราเสร็จแล้ว

คำสุดท้าย

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

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

ขอให้สนุกกับการเขียนโค้ด!