إدارة علامات التبويب والتحكم فيها
أنشئ علامات تبويب المتصفح وحدّثها وأغلقها واستعلم عنها برمجيًا، لتمكين ميزات قوية لإدارة علامات التبويب
إدارة علامات التبويب والتحكم فيها درس مجاني في Browser Extensions Development (Chrome & Edge) على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Browser Extensions Development (Chrome & Edge)، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Browser Extensions Development (Chrome & Edge) 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Introduction to Tab Management
Browser extensions can do more than just change web pages. They can also manage the browser itself!
This lesson explores how to programmatically control browser tabs. You'll learn to create, query, update, and close tabs using the Chrome Extensions API.
The chrome.tabs API
The core of tab management is the chrome.tabs API. It provides methods to interact with all open tabs in the browser, or even specific ones.
To use most of its functions, your extension needs the "tabs" permission declared in its manifest.json file.
Querying Tabs: Finding Active
You can find specific tabs based on various criteria. Let's start by finding the currently active tab in the current window.
The query() method returns an array of Tab objects that match your criteria.
// This code runs in your background script
// Requires "tabs" permission in manifest.json
chrome.tabs.query(
{ active: true, currentWindow: true },
function(tabs) {
if (tabs.length > 0) {
console.log("Active tab ID: " + tabs[0].id);
console.log("Active tab URL: " + tabs[0].url);
}
}
);Querying Tabs: By URL
Want to find all tabs open to a specific website? The query() method supports powerful filtering using URL patterns.
You can use wildcards (*) to match parts of a URL, making it very flexible.
// This code runs in your background script
// Requires "tabs" permission in manifest.json
chrome.tabs.query(
{ url: "*://developer.chrome.com/*" },
function(tabs) {
if (tabs.length > 0) {
console.log("Found " + tabs.length + " Chrome Dev tabs:");
tabs.forEach(tab => console.log("ID: " + tab.id + ", Title: " + tab.title));
} else {
console.log("No Chrome Dev tabs found.");
}
}
);Creating New Tabs
Opening a new tab is straightforward with chrome.tabs.create(). You can specify the URL, whether it should be active, and its position.
This method is great for opening links in a new tab based on extension logic.
// This code runs in your background script
// Requires "tabs" permission in manifest.json
chrome.tabs.create(
{ url: "https://www.coddykit.com", active: true, index: 0 },
function(newTab) {
console.log("New tab created with ID: " + newTab.id);
console.log("URL: " + newTab.url);
}
);Updating Existing Tabs
You can change an existing tab's properties, like its URL or its active state, using chrome.tabs.update().
You'll need the tabId of the tab you wish to update. This is useful for navigating a tab to a new page.
// This code runs in your background script
// Requires "tabs" permission in manifest.json
// First, find an active tab to update
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
if (tabs.length > 0) {
const tabIdToUpdate = tabs[0].id;
console.log("Updating tab ID: " + tabIdToUpdate);
chrome.tabs.update(
tabIdToUpdate,
{ url: "https://www.wikipedia.org", highlighted: true },
function(updatedTab) {
console.log("Tab updated to: " + updatedTab.url);
}
);
} else {
console.log("No active tab to update.");
}
});Closing Tabs Programmatically
To close one or more tabs, use the chrome.tabs.remove() method. It accepts a single tabId or an array of tabIds.
Be careful with this method, as closing tabs can interrupt a user's workflow!
// This code runs in your background script
// Requires "tabs" permission in manifest.json
// Example: Close the currently active tab (use with caution!)
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
if (tabs.length > 0) {
const tabIdToClose = tabs[0].id;
console.log("Attempting to close tab ID: " + tabIdToClose);
chrome.tabs.remove(tabIdToClose, function() {
if (chrome.runtime.lastError) {
console.error("Error closing tab: " + chrome.runtime.lastError.message);
} else {
console.log("Tab ID " + tabIdToClose + " closed.");
}
});
} else {
console.log("No active tab to close.");
}
});Getting Tab Details
When you create or update a tab, the callback function receives a Tab object. This object contains useful properties like id, url, title, and more.
Always check this object for the most up-to-date information about the tab.
// This code runs in your background script
// Requires "tabs" permission in manifest.json
chrome.tabs.create(
{ url: "https://example.com" },
function(newTab) {
console.log("New tab created.");
console.log("Tab ID: " + newTab.id);
console.log("Tab Title: " + newTab.title);
console.log("Tab URL: " + newTab.url);
// You can now use newTab.id for further operations
}
);Permissions for Tab Control
Remember, to use most chrome.tabs API functions, your manifest.json needs the "tabs" permission.
For operations like reading the URL of any tab, you'll also need the "<all_urls>" host permission or specific host permissions.
"tabs": Required for basic tab operations."<all_urls>": Required for querying URLs of tabs you didn't create or don't have host permission for.
Tab Management Challenge
Which of the following chrome.tabs API methods is primarily used to change the URL of an existing browser tab?
Recap: Mastered Tabs!
Great job! You've learned how to programmatically manage browser tabs using the chrome.tabs API.
- We covered how to query tabs based on various criteria.
- You learned to create new tabs with specific URLs.
- You can now update existing tabs to change their properties.
- And finally, you know how to close tabs programmatically.
These skills are essential for building powerful browser extension automation features!
تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 12
- الدروس
- 48
الأسئلة الشائعة
هل درس «إدارة علامات التبويب والتحكم فيها» مجاني؟
نعم — نص درس «إدارة علامات التبويب والتحكم فيها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Browser Extensions Development (Chrome & Edge)، انتقل إلى CoddyKit PRO. تتضمن دورة Browser Extensions Development (Chrome & Edge) 4 دروس في المجموع.
ماذا ستتعلم في «إدارة علامات التبويب والتحكم فيها»؟
أنشئ علامات تبويب المتصفح وحدّثها وأغلقها واستعلم عنها برمجيًا، لتمكين ميزات قوية لإدارة علامات التبويب تتمرن على Browser Extensions Development (Chrome & Edge) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Browser Extensions Development (Chrome & Edge)؟
لا تُشترط خبرة سابقة. Browser Extensions Development (Chrome & Edge) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «إدارة علامات التبويب والتحكم فيها»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Browser Extensions Development (Chrome & Edge) هذا؟
نعم. كل درس في Browser Extensions Development (Chrome & Edge) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إدارة علامات التبويب والتحكم فيها
- إرسال النماذج برمجيًا
- أتمتة تفاعلات المستخدم
- جدولة المهام باستخدام Alarms API