My first Opera Extension

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:

cbIssue

The photo comes from here

 

 

 

Leave a Comment

Your email address will not be published. Required fields are marked *