This is my first time fiddling with a Chrome extension and it should be pretty simple, but I can't quite get all the pieces to fit together. Overall my goal is that whenever a new tab is opened matching part of a URL (i.e. https://somewhere.com/script.php?id=*) it will put that tab in a new group, name that group the title of the page, and collapse the group.
The relevant code is pretty simple, and works when I run it by clicking the extension button:
const group = await chrome.tabs.group( { "tabIds" : tab.id } );
await chrome.tabGroups.update(group, { title: tab.title, "collapsed": true });
However, I would like it to just run automatically whenever a new tab is opened. I am attempting to add a listener to fire the code, but getting an Unexpected reserved word error on await. Removing the two awaits resolves the error, but the code doesn't work then. At least, it's not being called from the event.
Here is my code. Note that I originally just used an anonymous function, but created a separate function just to see if that made a difference:
chrome.tabs.onCreated.addListener(group_tabs(tab));
function group_tabs(tab){
if (tab.url.indexOf('https://myurl.com/instances.php?account_id=') != -1) {
const group = await chrome.tabs.group( { "tabIds" : tab.id } );
await chrome.tabGroups.update(group, { title: tab.title, "collapsed": true });
}
};
Bonus points if anyone can explain how to run this code without clicking on the extension icon.
Here are the complete contents of the original popup.js file shamelessly stolen from the Google Developers git repo:
chrome.tabs.onCreated.addListener(group_tabs(tab));
function group_tabs(tab){
if (tab.url.indexOf('https://wupgrade.wsysnet.com/cloud_support/dashboard/instances.php?account_id=') != -1) {
const group = await chrome.tabs.group( { "tabIds" : tab.id } );
await chrome.tabGroups.update(group, { title: tab.title, "collapsed": true });
}
};
const tabs = await chrome.tabs.query({
url: [
'https://wupgrade.wsysnet.com/cloud_support/dashboard/instances.php?account_id=*'
]
});
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));
const template = document.getElementById('li_template');
const elements = new Set();
for (const tab of tabs) {
const element = template.content.firstElementChild.cloneNode(true);
const title = tab.title.split('-')[0].trim();
const pathname = new URL(tab.url).pathname.slice('/docs'.length);
element.querySelector('.title').textContent = title;
element.querySelector('.pathname').textContent = pathname;
element.querySelector('a').addEventListener('click', async () => {
// need to focus window as well as the active tab
await chrome.tabs.update(tab.id, { active: true });
await chrome.windows.update(tab.windowId, { focused: true });
});
const group = await chrome.tabs.group( { "tabIds" : tab.id } );
await chrome.tabGroups.update(group, { title: tab.title, "collapsed": true });
elements.add(element);
}
document.querySelector('ul').append(...elements);
const button = document.querySelector('button');
button.addEventListener('click', async () => {
const tabIds = tabs.map(({ id }) => id);
if (tabIds.length) {
const group = await chrome.tabs.group({ tabIds });
await chrome.tabGroups.update(group, { title: 'DOCS' });
}
});
The way it initially worked was when you click the extension, any tab that matched the URL would be put into its own collapsed group and named accordingly. That was a major advance for me, but the problem came when I had some groups already open, opened more, and then clicked the icon. It would remove any tabs with matching URLs from the existing groups, and put them into a new group leaving the other tabs in the old group.
I don't see a way to check if a tab is already in a group and having this just run automatically on new tabs would be a much better solution.
Thanks in advance for any help.