To make sure your extension works whenever the user switches to a different webpage, you can listen for the chrome.tabs.onUpdated event in the background script of your extension. This event will notify your extension whenever a tab is updated (e.g., when the user navigates to a different webpage), so you can trigger your logic to get the title again.
Here’s how you can adjust your extension code:
manifest.json)Make sure the extension is set up to use background scripts and has the necessary permissions.
json{
"manifest_version": 3,
"name": "Page Title Extension",
"version": "1.0",
"description": "Display the page title when the extension icon is clicked.",
"permissions": ["tabs"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/16.png",
"48": "icons/48.png",
"128": "icons/128.png"
}
},
"host_permissions": [
"http://*/*",
"https://*/*"
]
}
background.js)This script listens for the tab updates and triggers the title fetching logic. You can also listen for the extension icon click to show the current tab’s title.
javascriptchrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
// Check if the page has finished loading
if (changeInfo.status === 'complete') {
chrome.scripting.executeScript({
target: { tabId: tabId },
function: displayTitle
});
}
});
function displayTitle() {
const title = document.title;
chrome.storage.local.set({ pageTitle: title });
}
popup.js)This is where the title will be shown when the user clicks the extension icon.
javascriptdocument.addEventListener('DOMContentLoaded', () => {
chrome.storage.local.get('pageTitle', (data) => {
const title = data.pageTitle || 'No title available';
document.getElementById('title').textContent = title;
});
});
popup.html)This is the layout for the popup that will display the title.
html<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
width: 200px;
height: 100px;
padding: 10px;
font-family: Arial, sans-serif;
}
#title {
font-size: 16px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="title">Loading...</div>
<script src="popup.js"></script>
</body>
</html>
When the user clicks the extension icon, the popup shows the current page title (stored in chrome.storage.local).
When the user navigates to another page, the background script listens for the tab update (chrome.tabs.onUpdated), and the page title is stored again using chrome.storage.local.
The popup is always updated with the latest title stored in chrome.storage.local whenever the extension icon is clicked.
This approach ensures that the extension is always aware of the page title and updates it when the user switches tabs.
Ah, I see! If the title of the same webpage changes due to user intervention (e.g., the title is updated dynamically with JavaScript on the page), you’ll want to listen for changes to the title within the current tab, not just when the page finishes loading.
To achieve this, you can monitor the document.title property for changes. You can use the MutationObserver API in the content script to detect changes to the title dynamically. Here's how you can adjust the code:
manifest.json)You still need the permissions and background script, but now you'll add the content script for detecting title changes on the page.
json{
"manifest_version": 3,
"name": "Page Title Extension",
"version": "1.0",
"description": "Display the page title when the extension icon is clicked.",
"permissions": ["tabs"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/16.png",
"48": "icons/48.png",
"128": "icons/128.png"
}
},
"host_permissions": [
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
content.js)This script will monitor changes to the document.title using a MutationObserver and store the title in chrome.storage.local.
javascript// Function to observe changes to the title
const observer = new MutationObserver(() => {
const title = document.title;
chrome.storage.local.set({ pageTitle: title });
});
// Configuration for observing title changes
const config = { childList: true, subtree: true };
// Start observing the document for changes to the title
observer.observe(document.querySelector('head'), config);
// Initial title set
chrome.storage.local.set({ pageTitle: document.title });
background.js)In this case, the background script can remain simple, as we’re handling the title change detection directly in the content script.
javascriptchrome.runtime.onInstalled.addListener(() => {
console.log('Extension installed');
});
popup.js)The popup script remains the same as before. It reads the stored title from chrome.storage.local and displays it when the user clicks the extension icon.
javascriptdocument.addEventListener('DOMContentLoaded', () => {
chrome.storage.local.get('pageTitle', (data) => {
const title = data.pageTitle || 'No title available';
document.getElementById('title').textContent = title;
});
});
popup.html)The popup layout remains unchanged. It shows the page title when the extension icon is clicked.
html<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
width: 200px;
height: 100px;
padding: 10px;
font-family: Arial, sans-serif;
}
#title {
font-size: 16px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="title">Loading...</div>
<script src="popup.js"></script>
</body>
</html>
The content script (content.js) uses a MutationObserver to monitor changes to the title (document.title).
Whenever the title changes on the page (due to user intervention or other dynamic changes), the new title is saved in chrome.storage.local.
The popup (popup.html) displays the latest title from chrome.storage.local when the extension icon is clicked.
This ensures that the extension reflects the current page title, even if the title changes dynamically without navigating to another page.
This setup will allow your extension to detect and respond to title changes on the same page, as requested.