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

دمج الكلمات المفتاحية مع Omnibox

ادمج إضافتك مع Omnibox في المتصفح، بما يتيح للمستخدمين تشغيل الإجراءات أو عمليات البحث مباشرةً من شريط العناوين

الدرس 2 من 412 خطوة

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

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

What is the Omnibox?

The omnibox is the URL bar at the top of your browser. It's not just for typing website addresses; it also handles searches and can be a powerful entry point for browser extensions!

Integrating with the omnibox allows users to quickly interact with your extension directly from the address bar, without needing to click an icon or open a popup.

Power Up Your Address Bar

Why integrate your extension with the omnibox?

  • Quick Access: Users can trigger extension actions with just a few keystrokes.
  • Custom Searches: Create shortcuts for specific searches within your extension's data.
  • Streamlined Workflow: Perform tasks without interrupting their browsing flow.

Setting Your Omnibox Keyword

To enable omnibox integration, you need to declare it in your extension's manifest.json file.

You'll specify a unique keyword. When a user types this keyword into the omnibox, followed by a space, your extension takes over the input.

Manifest Keyword Example

Here's how to declare an omnibox keyword, for example, 'myext':

{  "manifest_version": 3,
  "name": "My Omnibox Extension",
  "version": "1.0",
  "omnibox": {
    "keyword": "myext"
  },
  "background": {
    "service_worker": "background.js"
  }
}

Capturing User Input

Once your keyword is set, your background service worker needs to listen for user input. The main event for this is chrome.omnibox.onInputChanged.

This event fires every time the user types a character after your keyword, allowing you to provide real-time suggestions.

Displaying Live Suggestions

The onInputChanged listener provides a suggest callback function. You use this to send an array of suggestion objects back to the omnibox.

Each suggestion object needs a content (what gets inserted if selected) and a description (what the user sees in the dropdown).

Dynamic Suggestions in Action

This background.js snippet shows how to listen for input and offer basic suggestions. Try typing 'myext hello' in your browser's omnibox after loading this extension.

// background.js
chrome.omnibox.onInputChanged.addListener(
  function(text, suggest) {
    let suggestions = [];
    if (text.startsWith("hello")) {
      suggestions.push({content: "hello world", description: "Says Hello World"});
      suggestions.push({content: "hello there", description: "Greets you"});
    } else {
      suggestions.push({content: "type 'hello'", description: "Try typing 'hello'"});
    }
    suggest(suggestions);
  }
);

Acting on User Selection

After the user types their input and optionally selects a suggestion, they press Enter. This triggers the chrome.omnibox.onInputEntered event.

This is where your extension performs the final action based on the user's input, like opening a new tab or executing a script.

Executing Actions

Inside onInputEntered, the text parameter contains the final string the user entered or selected.

A common action is to open a new tab with a specific URL using chrome.tabs.create({url: '...' }), or perform a search based on the input.

Full Omnibox Integration

Here's a more complete example combining both input handling and action execution. This example allows users to search Google directly from the omnibox using 'myext go [query]'.

// background.js
chrome.omnibox.onInputChanged.addListener(
  function(text, suggest) {
    let suggestions = [];
    if (text.startsWith("go ")) {
      const query = text.substring(3);
      suggestions.push({
        content: `https://www.google.com/search?q=${query}`,
        description: `Search Google for "${query}"`
      });
    } else {
      suggestions.push({
        content: "go [search_term]",
        description: "Type 'go' to search Google"
      });
    }
    suggest(suggestions);
  }
);

chrome.omnibox.onInputEntered.addListener(
  function(text, disposition) {
    if (text.startsWith("http://") || text.startsWith("https://")) {
      chrome.tabs.create({url: text});
    } else if (text.startsWith("go ")) {
      const query = text.substring(3);
      chrome.tabs.create({url: `https://www.google.com/search?q=${query}`});
    } else {
      console.log("Omnibox entered:", text);
      chrome.tabs.create({url: `https://www.google.com/search?q=${text}`});
    }
  }
);

Omnibox Quick Check

You've learned how to integrate your extension with the browser's omnibox. Let's test your knowledge!

Omnibox Power-Up Recap

Great job! You've learned how to integrate your extension with the browser's omnibox.

  • We defined a keyword in manifest.json.
  • We used chrome.omnibox.onInputChanged to provide dynamic suggestions as the user types.
  • We handled the final action using chrome.omnibox.onInputEntered, for example, opening a new tab.

This powerful feature allows users to interact with your extension quickly and efficiently right from their address bar!

البدء مجانًا

تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
12
الدروس
48

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

هل درس «دمج الكلمات المفتاحية مع Omnibox» مجاني؟

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

ماذا ستتعلم في «دمج الكلمات المفتاحية مع Omnibox»؟

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

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

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

كم من الوقت يستغرق درس «دمج الكلمات المفتاحية مع Omnibox»؟

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

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

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

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

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