In my company we are using an old version CodeBeamer as bug-tracker, it works well but it has a problem: when you open an issue the title of window/tab is the same for all issues. That’s to say when you have many tabs open, you cannot tell which tab belongs to whitch issue.
A colleague of mine used greasemonkey (Firefox) first and then a Chrome extension to customize the tab. However, I use Opera at work and I wanted to create something myself, so I made up my mind and decided to create my own extension.
As a starting point I checked the Opera Developer Site, there I found a nice tutorial on how to build an extension. In the example they provide, they show how to create a button that opens a tab, you just need to write two files: one manifest that describes the extension and a script file called background script, that does the job.
What I wanted though, was an extension that responds to the content of the page. Looking at the documentation I found out that I had to use a content script.
I changed the manifest to work with a content script and wrote the code to change the tab name. I am not a JavaScript expert to I used stackoverflow.com to find a way to change the windows title and to get the issue number from the address bar.
Here is the result:
manifest.json:
{
"manifest_version": 2,
"name": "My Company CodeBeamer Extension",
"description": "Beautifies the tabs for CodeBeamer",
"version": "0.2",
"content_scripts": [
{
"matches": ["https://www.mycompany.com/cb/*"],
"js" : ["content.js"]
}
],
"permissions": ["tabs"]
}
content.js:
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var url = window.location.href;
var taskId = getParameterByName('task_id', url);
if(taskId){
document.title = "#"+taskId
}
Using the manifest I can make the extension work exclusively on my site.
This is the final result:
The photo comes from here