How Can A Chrome Extension Add A Floating Bar At The Bottom Of Pages?

January 28, 2024 Post a Comment

I am creating a chrome extension that needs to inject a floating element (i.e position:fixed) at the bottom of pages . My requirements are: I need to access elements inside it fr

Solution 1:

Suggestions for 3 approaches

Content script injecting a fixed html element

Yes, the styles if specified are too generic in web pages

Ex:

div { 
   border:none;
}

does effect content script(s) elements even you assign rare combination of id(s) and classes to css, Solution is to specify (or) override all styles using css which is very cumbersome

Ex: Over ride every style which is error prone and cumbersome.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Content script injecting an iframe.

I suggest this is best approach , regarding your concern on script injection on dynamic iframes; Yes it is possible to inject script to dynamic generated iframes

Sample Implementation

manifest.json

{"name":"Iframe","description":"","version":"1","manifest_version":2,"content_scripts":[{"matches":["<all_urls>"],"js":["myscript.js"],"run_at":"document_end"},{"matches":["<all_urls>"],"js":["anotherscript.js"],"all_frames":true}],"permissions":["<all_urls>"]}

myscript.js

var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.facebook.com/plugins/like.php?href=http://allofrgb.blogspot.in/");
iframe.setAttribute("style", "border:none; width:150px; height:30px");
iframe.setAttribute("scrolling", "no");
iframe.setAttribute("frameborder", "0");
document.body.appendChild(iframe);

anotherscript.js

iframes = document.getElementsByTagName("iframe");
for (iframe in iframes){
    console.log(iframes[iframe].src);
}
console.log("In another Script");

If you observe console logged messages you observe messages are logged twice (document log + iframe log + [any number of optional iframes in pages]*)

Baca Juga

anotherscript.js which runs during document idle states does execute in dynamic generated iframe, how ever you can re-run content script through chrome.tabs.executeScript() any time.

Extending the Devtool panel

You have clearly identified problems, so eliminating it as an alternative.

Solution 2:

As Sudarshan commented, an iframe is the best practice here.

in order to run a script within the iframe I simply included the iframe.html and script.js within my plugin. In my content script I got the iframe with chrome.extension.getURL('iframe.html') (only background script can access this API so I used Message Passing) the script was included as a relative script tag within the iframe like so: <script src="script.js"></script>

The surprising part for me was that although script.js was not included in the manifest, It can still access chrome api and, more importantly in my case, send messages to the background script.

JavaScript Test