0Pricing
Browser Extensions Development (Chrome & Edge) · درس

تعديلات Manifest لتوافق المتصفحات

حدّد الاختلافات في إعدادات manifest.json وسلوك واجهات API بين Chrome وEdge وتعامل معها

تعديلات Manifest لتوافق المتصفحات درس مجاني في Browser Extensions Development (Chrome & Edge) على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Browser Extensions Development (Chrome & Edge)، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Browser Extensions Development (Chrome & Edge) 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Why Cross-Browser Harmony?

Developing browser extensions for multiple platforms like Chrome and Edge opens your project to a much wider audience. While both browsers support Manifest V3, achieving true cross-browser compatibility requires attention to detail.

In this lesson, we'll explore the subtle differences in manifest.json configurations and API behaviors, helping you build extensions that work seamlessly everywhere.

Manifest V3 Core: Shared Foundation

Many core fields in your manifest.json are identical for both Chrome and Edge, providing a solid shared foundation:

  • manifest_version: Always 3 for current extensions.
  • name, version, description: Standard metadata.
  • action: Defines your toolbar popup, its icon, and title.

These fields rarely require browser-specific adjustments.

{
  "manifest_version": 3,
  "name": "My Cross-Browser Extension",
  "version": "1.0",
  "description": "A simple extension for Chrome and Edge.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

Permissions: Universal Declarations

Both Chrome and Edge use the same syntax for declaring permissions and host_permissions. These determine what your extension can do and which websites it can interact with.

Careful declaration here is crucial, as any difference could lead to a permission warning or functional failure on one browser.

{
  "permissions": [
    "storage",
    "activeTab"
  ],
  "host_permissions": [
    "*://*.example.com/*",
    "https://www.google.com/*"
  ]
}

Content Security Policy (CSP) Nuances

The content_security_policy key is used in both browsers to mitigate injection attacks. However, subtle differences in default values or enforcement can occur, especially for script-src and object-src directives.

Always test your CSP on both browsers, as a policy too strict for one might break functionality, while one too lenient could be a security risk.

{
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

`declarativeNetRequest` Rulesets

The declarativeNetRequest API allows blocking or modifying network requests without intercepting them, enhancing privacy and performance. The structure for defining rulesets is highly standardized across browsers.

While the format is consistent, be aware that browser-specific limits on the number of rules or rulesets might have minor variations. Always consult the official documentation for current limits.

{
  "permissions": [
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ruleset_1",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

API Behavior: `chrome.tabs` Example

While most chrome.* APIs are designed for compatibility, subtle behavioral differences can emerge. For instance, creating or updating tabs with chrome.tabs might have distinct default behaviors or event firing sequences.

Always verify the exact behavior of complex API calls, especially those involving UI interaction or navigation.

chrome.action.onClicked.addListener(async (tab) => {
  const newTab = await chrome.tabs.create({
    url: 'https://example.com/new-page',
    active: false
  });
  console.log('New tab created:', newTab.id);
  // Edge might handle 'active: false' slightly differently
  // or fire specific events in a different order.
});

API Behavior: `chrome.storage` Quotas

The chrome.storage API provides persistent storage for your extension's data. While its core functionality is robustly cross-browser, the actual storage quotas can vary.

For example, QUOTA_BYTES (total bytes for sync storage) and QUOTA_BYTES_PER_ITEM might have slightly different limits in Chrome versus Edge. Design your storage strategy with the lowest common denominator in mind.

chrome.storage.sync.set({
  'user_setting': 'value_A'
}, () => {
  if (chrome.runtime.lastError) {
    console.error('Storage error:', chrome.runtime.lastError.message);
    // Check limits if storage fails unexpectedly.
  } else {
    console.log('Setting saved.');
  }
});

Localization (`_locales`) Best Practices

Internationalizing your extension using the _locales folder and default_locale in your manifest is a standard practice supported by both browsers.

Ensure consistency in your message keys and placeholder formatting across all locale files. While the system is consistent, testing translated strings in both browsers ensures proper display and avoids layout issues.

{
  "default_locale": "en",
  "name": "__MSG_extensionName__",
  "description": "__MSG_extensionDescription__"
}

Conditional Manifests with Build Tools

For advanced scenarios where Chrome and Edge require significantly different manifest configurations (e.g., unique permissions, different icons for branding), a single manifest.json might not suffice.

Many developers use build tools (like Webpack or custom scripts) to generate browser-specific manifest.json files and package them accordingly. This allows for maximum flexibility but adds build complexity.

Quick Check: Cross-Browser Nuances

When developing a browser extension for both Chrome and Edge, which aspect is most likely to require careful review and potential adjustments due to subtle behavioral differences, even if the API syntax is identical?

Recap: Navigating Cross-Browser Manifests

You've learned that while Chrome and Edge share a largely compatible Manifest V3 structure, cross-browser development requires attention to detail.

  • Core manifest fields and permission declarations are mostly consistent.
  • CSP, API behaviors (like chrome.tabs, chrome.storage quotas), and localization should be carefully reviewed and tested on both browsers.
  • For significant divergences, build tools can generate browser-specific manifests.

Thorough testing is your best friend for a truly harmonious cross-browser extension!

الأسئلة الشائعة

هل درس «تعديلات Manifest لتوافق المتصفحات» مجاني؟

نعم — نص درس «تعديلات Manifest لتوافق المتصفحات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Browser Extensions Development (Chrome & Edge)، انتقل إلى CoddyKit PRO. تتضمن دورة Browser Extensions Development (Chrome & Edge) 4 دروس في المجموع.

ماذا ستتعلم في «تعديلات Manifest لتوافق المتصفحات»؟

حدّد الاختلافات في إعدادات manifest.json وسلوك واجهات API بين Chrome وEdge وتعامل معها تتمرن على Browser Extensions Development (Chrome & Edge) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Browser Extensions Development (Chrome & Edge)؟

لا تُشترط خبرة سابقة. Browser Extensions Development (Chrome & Edge) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «تعديلات Manifest لتوافق المتصفحات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Browser Extensions Development (Chrome & Edge) هذا؟

نعم. كل درس في Browser Extensions Development (Chrome & Edge) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. تعديلات Manifest لتوافق المتصفحات
  2. استخدام WebExtension Polyfills
  3. استكشاف أطر تطوير الإضافات
  4. التعبئة والنشر في متاجر متعددة
← العودة إلى Browser Extensions Development (Chrome & Edge)