I create a Chrome Extension and would like to know:
How can I create an overlay over an existing webpage in a chrome extension?
I don't want to use a popup, I would rather prefer a banner at the top or bottom of the page.
I did read the Google Chrome Extension documentation but couldn't find the solution for my problem in it. Can you give me a hint?
You can create a content script that injects an on the top/bottom of the web page. That is on all http, and https websites.
Note: This code does not work on the local chrome:// and Chrome Web Store pages.
For example in your content.js:
var newiframe = document.createElement("iframe");
newiframe.setAttribute("src", chrome.runtime.getURL("html/panel.html"));
newiframe.style.width = "100%";
newiframe.style.top = "0";
newiframe.style.left = "0";
newiframe.style.right= "0";
newiframe.style.position = "absolute";
newiframe.style.zIndex = "500";
newiframe.style.height = "80px";
document.body.appendChild(newiframe);
And in your manifest.json:
{
"manifest_version": 3,
"name": "__MSG_name__",
"short_name": "Proper Menubar",
"version": "1.0",
"description": "__MSG_description__",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["js/content.js"],
"run_at": "document_end"
}
],
"web_accessible_resources": [{
"resources": [ "html/panel.html",
"js/script.js",
"css/body.css"],
"matches": ["<all_urls>"],
"use_dynamic_url": true
}],
"permissions": [ "activeTab" ]
}
panel.html:
<html>
<head>
<style>body{background:red;color:white}</style>
</head>
<body>Hello there</body>
</html>
Related
Lets say my extension have a background page that injects an external iframe that in turn runs a content script, something like it's shown in below. What mechanism would you suggest for me to check that the messages the background script receives via onConnect and onMessage come from the content script that loaded in the background page and not from any other eternal webpage?
background.js
import browser from 'webextension-polyfill';
var iframe = document.createElement("iframe");
iframe.src = 'https://example.com/favicon.ico';
document.body.appendChild(iframe);
manifest.json
{
"name": "My Extension",
"background": {
"scripts": ["background.js"],
"persistent": true
},
"manifest_version": 2,
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"content_scripts": [
{
"matches": ["https://example.com/favicon.ico"],
"js": ["content.js"],
"all_frames": true
}
],
"permissions": [
"*://example.com/*",
"webRequest",
"webRequestBlocking"
]
}
im working to create a very simple chrome extension just to remove an annoying tag from a site here is my codes
my manifest.json file include those lines :
{
"manifest_version": 2,
"name": "RemoveMysatgoHelp",
"description": "Remove Mysatgo Help tag",
"version": "1.0",
"icons": {
"16": "imgs/16.png",
"32": "imgs/32.png",
"64": "imgs/64.png",
"128": "imgs/128.png"
},
"content_scripts": [
{
"matches": [
"*://*.mysatgo.com/*"
],
"js": [
"content.js"
],
"run_at": "document_idle"
}
]
}
my content.js file include this single line:
var elements0 = document.getElementById('launcher');
elements0.style.display='none';
i need to remove these "Help window"at the bottom of the page it disturbing the main player control, here is my illustration https://prnt.sc/qaeaf5
i believe it is a dynamic tag inside an anonymous div tag ,the only id name that we have is within the iframe tag and the idname is "launcher"
my question
the problem again the elements0 return null ,because it seems the page not fully loaded with all the sources
any solution ?
Thanks
I am creating a chrome extension. Problem I am facing is I am able to see the html content but I am not seeing my js files included in content_scripts. I am checking this by inspecting on my extension & checking sources tab.
Mainfest -
{
"manifest_version": 2,
"name": "My Plugin",
"description": "some description",
"version": "1.0",
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["myPopup.js"]
}
],
"permissions": [
"activeTab",
"declarativeContent",
"storage"
]
}
myPopup.js -
console.log("hello world")
What could I be doing wrong?
Source tab will display the scripts that are actually injected into page DOM.
If you are trying to debug the content script, then add a debugger to your content script.
Open the developer tools and reload the page, you should be able to see content script in the source tab.
enter image description here
I want to access performance.getEntries inside all iframes on a certain page (my aim is to create a deep understanding of what is going on inside banner tags). However, I cannot inject a content script inside dynamically generated iframes it seems.
Am I doing something wrong in the example below?
Or is there a possible other route of getting performance.getEntries for these dynamically generated frames?
Consider an extremely simple html like this:
<html>
<body>
<script>
var iframe = document.createElement('iframe');
var html = '<body><img src="http://dummyimage.com/100x200/333/fff&text=hey_2_1"><img src="http://dummyimage.com/100x200/555/fff&text=hey_2_2"></body>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
</script>
<img src="http://dummyimage.com/100x200/333/fff&text=hey_1_1">
<img src="http://dummyimage.com/100x200/333/fff&text=hey_1_2">
</body>
</html>
And an extension like this
manifest.json
{
"manifest_version": 2,
"name": "Banner Spy 1",
"description": "Check all iframes",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"run_at": "document_end",
"all_frames" : true,
"match_about_blank": true,
"matches": ["<all_urls>"],
"js": ["content_frame.js"]
}
],
"permissions": [
"tabs",
"activeTab",
"<all_urls>"
]
}
content_frame.js
setTimeout(function(){
var pe = performance.getEntries();
console.log(pe);
}, 1000);
Running this extension will only show performance entries for the top page, not the dynamic iframe.
I am writing a Chrome Extension mainly for Pull Requests on Github Enterprise and have ran into an issue. When the page is loaded via a refresh or direct entering of the url from your browser it runs, when it is ran from clicking a link within Github it does not.
For instance if you go to this page with Pull Requests and click into one of them it will not run. But if you refresh that same page it will run.
manifest.json
{
"name": "Github Sample",
"manifest_version": 2,
"version": "0.0.1",
"description": "Sample",
"permissions": [
"tabs", "<all_urls>",
"http://github.com/*"
],
"content_scripts": [
{
"matches": [ "https://github.com/*" ],
"js": ["github.sample.js"],
"run_at": "document_end"
}
]
}
github.sample.json
// ==UserScript==
// #author Jacob Schoen
// ==/UserScript==
alert("Extension has Ran");
To make this easier I have pushed this to github.
Any ideas on how to address this?
GitHub site uses jquery-pjax library (see How to make github style page transitions by pjax).
Basically you only need to run the content script once and attach pjax event handlers inside an injected <script> element code which will be reusing a jQueryor $ variable of the site.
In those handlers you can send a message with document.dispatchEvent to your content script that will receive it in its window.addEventListener("blabla", ...)
or you can allow the access to chrome.runtime.sendMessage on the github site in manifest.json so that page-injected code will be able to send a message that can be received by the extension in chrome.runtime.onMessageExternal listener.
Alternatively you can use chrome.webNavigation.onHistoryStateUpdated in the background script but that will cause a warning during the installation that the extension can "Read your browsing history" which is a global permission unlike the content script solution.
The working example I came up with, in case it helps anyone else.
manifest.json
{
"name": "Github Sample",
"manifest_version": 2,
"version": "0.0.1",
"description": "Sample",
"permissions": [
"activeTab",
"tabs", "<all_urls>",
"http://github.com/*"
],
"content_scripts": [
{
"matches": [ "https://github.com/*" ],
"js": ["github.sample.js"],
"run_at": "document_idle"
}
],
"web_accessible_resources": ["inject.js"]
}
github.sample.js
// ==UserScript==
// #author Jacob Schoen
// ==/UserScript==
function myAlert() {
alert("Extension has Ran");
}
window.addEventListener("pageLoadTransition", myAlert);
var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.extension.getURL('inject.js');
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
//still have to load this one for direct page loads
myAlert();
inject.js
$(document).on('pjax:success', function() {
var evt=document.createEvent("CustomEvent");
evt.initCustomEvent("pageLoadTransition", true, true, null);
document.dispatchEvent(evt);
})
I also updated the Github repository with the working example.