ดาวน์โหลด adblockplus - ดาวน์โหลดซอร์สโค้ด adblockplus ดาวน์โหลด

adblockplus

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

adblock plus

ยินดีต้อนรับสู่ที่เก็บสำหรับส่วนขยาย Adblock Plus!

โครงการหลักนั้นโฮสต์บน Gitlab และนอกเหนือจากส่วนต่อประสานผู้ใช้และรหัสส่วนขยายเว็บส่วนขยาย Adblock Plus ยังมีรายการตัวกรองแบบคงที่เครื่องมือบล็อกโฆษณาส่วนเสริมเว็บของ Eyeo (EWE) และตัวอย่างของ Eyeo

เกี่ยวกับ adblock plus
ข้อกำหนดเบื้องต้น
องค์ประกอบ UI
การทดสอบ
อาคาร
การบริจาค

เกี่ยวกับ adblock plus

Adblock Plus เป็นส่วนขยายฟรีที่ช่วยให้ผู้ใช้สามารถปรับแต่งประสบการณ์เว็บของพวกเขา ผู้ใช้สามารถบล็อกโฆษณาที่น่ารำคาญปิดการใช้งานการติดตามและอีกมากมาย มีให้สำหรับเบราว์เซอร์เดสก์ท็อปที่สำคัญทั้งหมดและสำหรับอุปกรณ์มือถือ

Adblock Plus เป็นโครงการโอเพ่นซอร์สที่ได้รับอนุญาตภายใต้ GPLV3 และอยู่ภายใต้ข้อกำหนดการใช้งาน Eyeo GmbH เป็น บริษัท แม่ของ Adblock Plus

ข้อกำหนดเบื้องต้น

เพื่อมีส่วนร่วมในโครงการนี้คุณจะต้อง:

โหนด> = 18.17.1; <19
NPM 9

Node ควรติดตั้งด้วย npm หากไม่เป็นเช่นนั้นคุณสามารถดาวน์โหลด npm ได้ที่นี่

ข้อผิดพลาด `node-gyp` ?

หากคุณใช้เครื่อง Apple กับ Apple Silicon (ARM64 CPU) คุณอาจพบข้อผิดพลาดที่ node-gyp ไม่สามารถสร้างได้ในระหว่าง npm install ในกรณีนี้คุณต้องเรียกใช้ arch -x86_64 zsh ก่อนคำสั่งอื่น ๆ และตรวจสอบให้แน่ใจว่าคุณไม่ได้ใช้ nvm เพื่อเรียกใช้เวอร์ชันโหนด

อีกสาเหตุหนึ่งที่เป็นไปได้คือ node-gyp ไม่สามารถหาไบนารีออนไลน์ได้จากนั้นพยายามสร้างไบนารีในพื้นที่และล้มเหลวเนื่องจากการติดตั้ง Python 3.12 ซึ่งไม่ได้ทำงานกับ node-gyp บางรุ่น ที่สามารถแก้ไขได้โดยการติดตั้ง Python 3.11 ในพื้นที่และสามารถใช้ pyenv ได้

สำคัญ: บน Windows คุณต้องมีสภาพแวดล้อม Linux ที่ทำงานบน WSL และเรียกใช้คำสั่งจากภายใน Bash

เคล็ดลับ : หากคุณกำลังติดตั้ง node ใน Archlinux โปรดอย่าลืมติดตั้ง npm ด้วย

หลังจากโคลนนิ่งที่เก็บนี้ให้เปิดโฟลเดอร์และเรียกใช้ npm install

องค์ประกอบ UI

ข้อมูลจำเพาะสำหรับองค์ประกอบ Adblock Plus สามารถพบได้ในที่เก็บข้อมูลจำเพาะของ Eyeo

หน้า UI

เหล่านี้เป็นหน้าเว็บที่ผู้ใช้มีปฏิสัมพันธ์กับพวกเขาเป็นหลักเพราะพวกเขาสัมผัสกับพวกเขาผ่าน UI ของเบราว์เซอร์

Bubble UI (ป๊อปอัพ)
แผงเครื่องมือนักพัฒนา (Devtools-Panel)
ตัวเลือก
- เดสก์ท็อป (ตัวเลือกเดสก์ท็อป)
- มือถือ (Firefox) (ตัวเลือกมือถือ)

บทสนทนา

เหล่านี้เป็นหน้าเว็บที่ทุ่มเทให้กับคุณสมบัติเฉพาะและสามารถเข้าถึงได้ผ่านหน้า UI

นักแต่งเพลงตัวกรอง (นักแต่งเพลง)
ผู้รายงานปัญหา (ผู้ตรวจสอบปัญหา)

หน้าลงจอด

นี่คือหน้าเว็บที่ไม่สามารถเข้าถึงได้ผ่านหน้า UI พวกเขาจะเปิดโดยตรงหรือโดยอ้อมโดยส่วนขยายภายใต้เงื่อนไขบางประการ

วันที่ 1 (วันที่ 1)
วิ่งครั้งแรก (วิ่งครั้งแรก)
ปัญหา (ปัญหา)
อัปเดต (อัปเดต)

หน้าผู้ช่วย

หน้าเหล่านี้เป็นส่วนหนึ่งของหน้าอื่น พวกเขาไม่ได้หมายถึงการแสดงด้วยตนเอง

Bubble UI Dummy (Popup-Dummy)
พร็อกซี (พร็อกซี)

ฟังก์ชั่นการขยายเพิ่มเติม

เหล่านี้เป็นส่วนหนึ่งของตรรกะส่วนขยายที่ทำงานควบคู่ไปกับรหัสส่วนขยายอื่น ๆ ในกระบวนการพื้นหลังของส่วนขยาย

การแจ้งเตือน
การตั้งค่า

การทดสอบ

หากคุณไม่ต้องการสร้างส่วนขยายทั้งหมดคุณสามารถเปิดหน้า UI ในสภาพแวดล้อมการทดสอบโดยใช้เว็บเซิร์ฟเวอร์ท้องถิ่น สามารถทำได้โดยการ npm start ซึ่งช่วยให้คุณสามารถเข้าถึงหน้า HTML ภายใต้ URL ที่แสดงในเทอร์มินัลเช่น http://127.0.0.1:8080

ด้านต่าง ๆ ของหน้าสามารถทดสอบได้โดยการตั้งค่าพารามิเตอร์ใน URL (ดูรายการพารามิเตอร์ URL)

หมายเหตุ : คุณต้องสร้างชุดรวมสำหรับหน้า UI ที่คุณต้องการทดสอบ

การทดสอบหน่วย

โฟลเดอร์ ./test/unit UNIT มีไฟล์ MOCHA หน่วยทดสอบต่างๆซึ่งสามารถเรียกใช้ผ่าน npm run $ unit.legacy สำหรับไฟล์ .ts เรามีการทดสอบหน่วย jest ที่สามารถเรียกใช้ผ่าน npm run $ unit.standard สิ่งเหล่านี้สามารถทำงานร่วมกันผ่าน npm test

การทดสอบแบบ end-to-end

โฟลเดอร์ ./test/end-to-end/tests end-to-end/tests มีการทดสอบแบบ end-to-end ต่างๆ การทดสอบเหล่านี้สามารถดำเนินการได้ในเครื่อง (ในเบราว์เซอร์ Chrome, Firefox และ Edge ที่มีเสถียรภาพล่าสุด) หรือสามารถดำเนินการได้โดยใช้ Lambdatest

วิ่งท้องถิ่น

ในการเรียกใช้การทดสอบแบบ end-to-end ในพื้นที่:

สร้างไฟล์. env ใหม่ตาม. env.e2e.template
สร้างการสร้างการเปิดตัวของส่วนขยาย
เรียกใช้การทดสอบ: สคริปต์ end-to-end-local

ตัวอย่าง:

cp .env.e2e.template .env.e2e
npm run build:release {chrome | firefox} -- --manifest-version {2 | 3}
MANIFEST_VERSION={2 | 3} BROWSER={chrome | firefox | edge} npm run test:end-to-end-local all

Lambdatest Run

ในการเรียกใช้การทดสอบแบบ end-to-end โดยใช้ Lambdatest:

สร้างไฟล์. ENV ใหม่ด้วยข้อมูลรับรอง Lambda ของคุณ คุณสามารถใช้. env.e2e.template ที่ให้เป็นคู่มือ
สร้างการสร้างการเปิดตัวของส่วนขยาย
เรียกใช้การทดสอบ: สคริปต์ NPM แบบ end-to-end npm run test:end-to-end all หรือ npm run test:end-to-end-mv3 all

หมายเหตุ

คุณสามารถแทนที่การทดสอบ all ด้วยชุดทดสอบเฉพาะ ( e2e , integration , smoke )
หากคุณต้องการเรียกใช้ไฟล์ทดสอบเดียวเท่านั้นคุณสามารถแทนที่ค่าของคุณสมบัติ all ใน Suites.js เป็นอาร์เรย์ที่มีเส้นทางไปยังการทดสอบที่คุณต้องการเรียกใช้เท่านั้น ตัวอย่าง:
```
 all : [ "./tests/test-options-page-dialog-links.js" ] ,
```
นักข่าว Allure ใช้สำหรับการแสดงผลลัพธ์หลังจากการดำเนินการเสร็จสมบูรณ์ รายงานสามารถสร้างและเปิดได้โดยใช้ npm run test:generate-and-open-report
ภาพหน้าจอของการทดสอบที่ล้มเหลวได้รับการบันทึกเพื่อ test/end-to-end/screenshots

การทดสอบการปฏิบัติตามกฎระเบียบ

การทดสอบการปฏิบัติตามกฎระเบียบดำเนินการบนหน้าทดสอบท้องถิ่นเพื่อให้มั่นใจว่าการปฏิบัติตาม Adblock Plus และโซลูชั่น Adblocking Eyeo อื่น ๆ พวกเขาเรียกใช้การทดสอบจากโครงการ TestPages โดยใช้งานสร้างท้องถิ่นของส่วนขยาย Adblock Plus

ข้อกำหนดเบื้องต้น:

นักเทียบท่า

เพื่อเรียกใช้การทดสอบ:

EXTENSION=dist/release/ < build file > MANIFEST={mv2 | mv3} ./test/compliance.sh

ตัวแปรสภาพแวดล้อมเสริม:

เบราว์เซอร์: เบราว์เซอร์และเวอร์ชันที่จะเรียกใช้ ค่าเริ่มต้นคือ "โครเมียมล่าสุด"
image_name: ชื่อของคอนเทนเนอร์ Docker ค่าเริ่มต้นคือ "การปฏิบัติตาม"

การเป็นผ้าสำลี

คุณสามารถตัดแต่งไฟล์ทั้งหมดผ่าน npm run lint หรือ Lint เฉพาะประเภทไฟล์เฉพาะ:

JavaScript/typeScript: npm run eslint
CSS: npm run $ lint.css
ไฟล์แปล: npm run $ lint.locale

หมายเหตุ : ทั้ง eslint และ stylelint สามารถช่วยแก้ไขปัญหาผ่าน --fix FLAG คุณสามารถลองตัวอย่างด้านล่างผ่าน NPX ซึ่งควรรวมโดยอัตโนมัติเมื่อคุณติดตั้ง npm

npx stylelint --fix css/real-file-name.css

CI Pipeline

โครงการใช้ Gitlab CI เพื่อเรียกใช้ท่อซึ่งมีงานสร้างและทดสอบ

ราตรี

การสร้างทุกคืนสำหรับสาขาคุณสมบัติและการเปิดตัวสามารถพบได้เป็นสิ่งประดิษฐ์จากหน้านี้

นักวิ่ง

งานท่อใช้นักวิ่งที่จัดการด้วยตนเองจาก Google Cloud Platform (GCP) การตั้งค่าของนักวิ่งถูกกำหนดไว้ในโครงการ DevOps Runner และสามารถตรวจสอบสถานะนักวิ่งได้ที่นี่ การเข้าถึงทรัพยากร GCP เช่นคอนโซล Gcloud สามารถได้รับจาก DevOps เช่นกัน

อาคาร

การสร้างส่วนขยาย

คัดลอกไฟล์ .env.defaults ในไดเรกทอรีรูทไปยังไฟล์. .env และกรอกตัวแปรตาม ขั้นตอนนี้สามารถข้ามไปได้และจำเป็นก็ต่อเมื่อคุณต้องการเปิดใช้งานการส่งข้อมูล CDP

ในการสร้างส่วนขยายคุณต้องอัปเดตการอ้างอิงก่อน จากนั้นคุณสามารถเรียกใช้คำสั่งต่อไปนี้สำหรับประเภทของการสร้างที่คุณต้องการสร้าง:

npm run build:{dev | release} {chrome | firefox | local} [-- < options > ]

หรือ

npm run build:source

เป้าหมาย:

Chrome : เบราว์เซอร์ที่ใช้โครเมียม
Firefox : Firefox
ท้องถิ่น : สภาพแวดล้อมการทดสอบในท้องถิ่น

build:dev : สร้างส่วนขยายที่ไม่ได้บรรจุใน dist/devenv/<garget>/ สามารถโหลดได้ภายใต้ Chrome: // ส่วนขยาย/ ในเบราว์เซอร์ที่ใช้โครเมียมและภายใต้ : การดีบัก ใน Firefox

build:release : สร้างไฟล์สร้างส่วนขยายต่อไปนี้ใน dist/ release/ ที่สามารถเผยแพร่ไปยังร้านค้าส่วนขยายต่างๆ:

adblockpluschrome-*. zip
adblockplusfirefox-*. xpi

build:source : สร้างไฟล์เก็บถาวรแหล่งที่มาต่อไปนี้ใน DIST/ Release/ ที่สามารถมอบให้กับการจัดเก็บส่วนขยายเพื่อวัตถุประสงค์ในการตรวจสอบ:

adblockplus-*. tar.gz

ตัวเลือก

--config <*.js file path> : ระบุเส้นทางไปยังไฟล์กำหนดค่าใหม่ที่สัมพันธ์กับ adblockpluschrome/gulpfile.js (ดูตัวอย่างใน adblockpluschrome/build/config/ )

--manifest-path <*.json file path> : ระบุเส้นทางไปยังไฟล์ Manifest.JSON ใหม่ที่สัมพันธ์กับ adblockPlusChrome/gulpfile.js (ดูตัวอย่างใน adblockpluschrome/build/tasks/manifest.js )

--manifest-version 3 หรือ -m 3 : สร้างงานสร้างที่เข้ากันได้กับ webextensions manifest เวอร์ชัน 3 ถ้าละเว้นมันจะสร้างงานสร้างสำหรับรายการ Manifest 2

--partial true : เรียกใช้งานสร้างที่จะไม่สร้างไอคอนใหม่กฎและ UI สิ่งนี้มีประโยชน์หากการเปลี่ยนแปลงใหม่ของคุณไม่ได้สัมผัสกับส่วนใดส่วนหนึ่งของส่วนขยายและคุณจะได้รับประโยชน์จากเวลาในการสร้างที่เร็วขึ้น โปรดทราบว่าคุณต้องมีการสร้างแบบเต็มครั้งหนึ่งก่อนที่คุณจะสามารถสร้างการสร้างบางส่วนได้อย่างประสบความสำเร็จ

อัปเดตการพึ่งพา

ติดตั้งแพ็คเกจ NPM ที่ต้องการ:

npm install

เรียกใช้คำสั่งข้างต้นอีกครั้งเมื่อการพึ่งพาอาจมีการเปลี่ยนแปลงเช่นหลังจากตรวจสอบการแก้ไขใหม่

รวม UI

ต้องสร้างไฟล์ต่าง ๆ ก่อนใช้ UI เมื่อสร้าง UI เพื่อรวมไว้ในส่วนขยายสิ่งนี้สามารถทำได้โดยใช้ npm run dist

สำหรับการใช้งานในสภาพแวดล้อมการทดสอบให้เรียกใช้ build:dev Script เพื่อสร้างชุดต่างๆสำหรับองค์ประกอบ UI ทั้งหมด

นอกเหนือจากนั้นพื้นที่เก็บข้อมูลนี้มีสาธารณูปโภคต่าง ๆ ที่เราพึ่งพาในกระบวนการพัฒนาของเรา

การรายงานข้อผิดพลาด

เราใช้ Sentry เพื่อรายงานข้อผิดพลาด ในการเริ่มต้นในระหว่างการสร้างนั้นจะต้องผ่าน ADBLOCKPLUS_SENTRY_DSN และ ADBLOCKPLUS_SENTRY_ENVIRONMENT ตัวแปรในไฟล์ .env หรือตัวแปรสภาพแวดล้อมในระหว่างการสร้าง (CI) หากไม่ได้เริ่มต้นการเตือนคอนโซลจะปรากฏขึ้น โดยค่าเริ่มต้น ADBLOCKPLUS_SENTRY_ENVIRONMENT=production อีเมลผู้ใช้จะถูกตัดที่ฝั่งไคลเอ็นต์และการขัดข้อมูลทางฝั่งเซิร์ฟเวอร์จะถูกกำหนดค่าตามค่าเริ่มต้น