So that you understand my knowledge base, I am a computer engineering major, and am working a job right now at a medical company over the summer. I have little (almost zero web code experience) but that is mostly what my job wants me to do so I have been trying to figure it all out as fast as I can.
I have used a lot of C, and Verilog and C++ in School, so computer "languages" are not new but I am having a hard time figuring this stuff all out.
Anyway, my first assignment has been to build an extension for Chrome that links into our Asterix phone server. All is has to do is find phone numbers on a webpage and turn them into a hyperlink, the hyperlink will be based on the phonenumber clicked, that part is trivial.
So, I read the W3 Schools stuff on HTML, JS, Ajax, Jquery, DOM ect.. so in the past 3 days I have learned a lot =)
This is what I produced:
It didn't seem like I needed a "backround.html" in my case because all I need to do is run a JS file once the page loads to find the phonenumbers and turn them into a link.
so I wrote a single manifest file, and a JS file to search the body for a number and put an tag around it, (currently going to www.google.com)
The good news is that it seems to work.
The bad news is that is makes Gmail freeze while loading, and makes hotmail not connect and not able to update and see new messages.
I didn't think you were even able to "break" the website in that way while making an extension.
All of my code is very small so I am just going to post it here.
manifest.json
{
"name": "Typenex Hyperlink-Dialer",
"version": "1.0",
"description": "This is a custom built extension for Typenex. This extension identifies phone numbers and allows the user to click the number to initiate a phonecall.",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_title": "Typenex Hyperlink-Dialer",
"default_icon": "typenex_logo.png"
},
"content_scripts" : [
{
"matches" : ["http://*/*", "https://*/*"],
"js" : ["typenex_contentscript.js"],
"run_at" : "document_idle",
"all_frames" : false
}
],
"manifest_version": 2
}
typenex_contentscript.js
var arrayOfNumbers = [];
alert("hi");
var regex = /d*[/-]*[0-9][0-9][0-9][/ -]*[0-9][0-9][0-9][/ -]*[0-9][0-9][0-9][0-9][ ]*/g;
newBody = document.body.innerHTML;
var i = 0;
do
{
temp = regex.exec(newBody);
if (temp != null)
arrayOfNumbers[i] = temp;
i++
}
while (temp)
for (var i = 0; i < arrayOfNumbers.length; i++)
{
newBody = newBody.replace(arrayOfNumbers[i], "<a href='http://www.google.com'>" + arrayOfNumbers[i] + "</a>");
}
document.body.innerHTML = newBody;
I am grateful for any help I can get, if it seems like I am misunderstanding something and you know something I can read that could help that would be great, I have been Google'ing a lot but I might not know enough to even be asking the right question.
I am very open minded if any of you have a better method to tackle this simple extension =)
See Question&Answers more detail:
os 
