I am developing an extension which adds a custom toolbar at the top of each page. To do this I am injecting toolbar.html from the extension. Since I am a beginner, I am not sure how I can access DOM elements of the current tab and how to to update the newly added iframe with the data from the current tab's DOM.
Here is the manifest:
{
"manifest_version": 2,
"name": "My Extension",
"description": "Extension to show custom toolbar",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background":{
"scripts":["background.js"]
},
"content_scripts":[{
"matches":["https://bitbucket.mycompany.com/*"],
"css":["styles.css"],
"js":["jquery.js","myscript.js"],
"all_frames":true
}],
"web_accessible_resources":[
"toolbar.html",
"styles.css"
]
}
Content script is myscript.js
var url=chrome.extension.getURL('toolbar.html');
var height='35px';
var iframe="<iframe src='"+url+"' id='myCustomBar' style='height:"+height+"'></iframe>"
$('html').append(iframe);
$('body').css({
'transform':'translateY('+height+')'
});
My questions are :
- If I use a separate content script (Answered here: access iframe content from a chrome's extension content script) for the iframe, what should be the URL matches?
- Are there any other ways of accessing the current tab's DOM from a dynamically injected iframe?
- Suppose I need this extension to run on all the URLs which have a URL pattern like
https://bitbucket.*.com
, what should be the matches?