Lets Start
Create a New Folder
Inside It
Create the manifest.json file:
{
"manifest_version": 2,
"name": "URL Saver",
"version": "1.0",
"description": "Save and open URLs from currently opened tabs",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"storage"
]
}
Create the popup.html file:
The popup.html file represents the popup window that appears when the extension's browser action button is clicked. It contains the user interface elements and logic for saving and opening URLs.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>URL Manager</title>
<style>
.container {
width: 300px;
padding: 20px;
}
h1 {
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
label {
font-weight: bold;
margin-bottom: 10px;
display: block;
}
select {
width: 100%;
margin-bottom: 20px;
}
button {
display: block;
margin-bottom: 10px;
}
.instance {
cursor: pointer;
margin-bottom: 5px;
}
.instance-name {
font-weight: bold;
}
.instance-urls {
margin-left: 10px;
list-style-type: disc;
}
.dropdown {
position: relative;
display: inline-block;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="container">
<h1>URL Saver</h1>
<h2>Instances</h2>
<div id="instanceList"></div>
<div class="dropdown">
<span>URLs</span>
<div class="dropdown-content" id="urlDropdown"></div>
</div>
<button id="saveButton">Save URLs</button>
</div>
<script src="popup.js"></script>
</body>
</html>
Create the popup.js file:
The popup.js file contains the JavaScript logic for handling user interactions and performing the necessary actions such as saving and opening URLs.
document.addEventListener('DOMContentLoaded', function() {
var instanceList = document.getElementById('instanceList');
var urlDropdown = document.getElementById('urlDropdown');
// Retrieve the saved instances from storage and display them
chrome.storage.sync.get('instances', function(result) {
if (result.instances) {
var instances = result.instances;
Object.keys(instances).forEach(function(instanceName) {
appendInstance(instanceName, instances[instanceName]);
});
}
});
// Append an instance to the list
function appendInstance(instanceName, instanceData) {
var instance = document.createElement('div');
instance.className = 'instance';
var instanceNameElem = document.createElement('span');
instanceNameElem.className = 'instance-name';
instanceNameElem.textContent = instanceName;
instance.appendChild(instanceNameElem);
instance.addEventListener('click', function() {
var windowId = instanceData.windowId;
var urls = instanceData.urls;
openUrls(windowId, urls);
});
instanceList.appendChild(instance);
var dropdownLink = document.createElement('span');
dropdownLink.textContent = instanceName;
dropdownLink.addEventListener('click', function(event) {
event.stopPropagation();
var urls = instanceData.urls;
displayUrls(urls);
});
urlDropdown.appendChild(dropdownLink);
}
// Save the URLs as an instance and update the list
document.getElementById('saveButton').addEventListener('click', function() {
chrome.windows.getCurrent({ populate: true }, function(window) {
var urls = window.tabs.map(function(tab) {
return tab.url;
});
var instanceName = prompt('Enter instance name:');
if (instanceName) {
var instanceData = {
windowId: window.id,
urls: urls
};
appendInstance(instanceName, instanceData);
chrome.storage.sync.get('instances', function(result) {
var instances = result.instances || {};
instances[instanceName] = instanceData;
chrome.storage.sync.set({ instances: instances });
});
}
});
});
// Display the URLs in the dropdown
function displayUrls(urls) {
urlDropdown.innerHTML = '';
urls.forEach(function(url) {
var p = document.createElement('p');
p.textContent = url;
urlDropdown.appendChild(p);
});
}
// Open the URLs in a new window
function openUrls(windowId, urls) {
chrome.windows.create({ url: urls, incognito: false }, function(newWindow) {
chrome.windows.update(newWindow.id, { focused: true });
});
}
});
Load the extension in Chrome:
To test the extension, open the Extensions page in Chrome by typing chrome://extensions
in the address bar.
Enable the "Developer mode" option.
Click on "Load unpacked" and select the folder containing your extension files.
The extension will be loaded and its browser action button will appear in the Chrome toolbar.
That's it!
Top comments (0)