Chrome Extension: How to add custom JS and CSS into a website - javascript

I'd like to develop a chrome extension and add my custom CSS and JS;
I have these Two files:
manifest.json
{
"name": "Block request",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}],
"permissions": [
"webRequest",
"webRequestBlocking",
"<all_urls>"
]
}
content_script.js
if (window.location.hostname = "w3schools.com") {
alert("Hello");
console.log("Hi console");
}
I added this extension to the Chrome, but when I refresh every page I got alert message;
How can I solve this issue?
Is my coding correct?

Related

Chrome extension, send message from panel.js to content script

I'm trying to intercept youtube requests response from a devtool panel and send it to the content or background script of a Chrome extension. but I can't get it to work.
There is loads of exemple online but most of them use Manifest V2 and I really want to make it work on V3.
I don't know which method to use for sending messages to the content or background script from the panel.js, nor do I know how to listen for incoming messages from the panel in those scripts.
And I don't know if I need to add more permissions in my manifest for this to work :
{
"manifest_version": 3,
"name": "Already Seen",
"version": "1",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-3.6.0.min.js", "content.js"],
"css": ["avatar.css"]
}
],
"devtools_page" : "devtools.html",
"action": {
"default_icon": "icon.png"
},
"background": {
"service_worker": "background.js"
},
"permissions": ["identity", "storage", "tabs", "webRequest"],
"host_permissions": ["https://www.youtube.com/", "https://youtube.com/"],
"externally_connectable": {
"matches": ["https://youtube.com/*"]
},
"oauth2": {
"client_id": "***************",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/userinfo.profile"
]
}
}
devtools.html
<script src="devtools.js"></script>
devtools.js
chrome.devtools.panels.create("Already Seen", "icon.png", 'panel.html');
panel.html
<html>
<body>
<script src="panel.js"></script>
</body>
</html>
panel.js
chrome.devtools.network.onRequestFinished.addListener((request) => {
request.getContent((body) => {
if (!request.request || !request.request.url) return;
// I NEED TO SEND THE MESSAGE HERE TO BACKGROUND.JS OR CONTENT.JS
});
});
I found another way of doing this by using the chrome.debbuger in the background script but it shows "... started debugging this browser" on top of every pages.

page blocked by chrome

I am trying to create a chrome extension, that will redirect to custom html file. the page is blocked by the browser
manifest.json
{
"manifest_version": 3,
"name": "Hello World!",
"version": "0.1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["src/blocker.js"]
}
],
"permissions": ["storage", "activeTab", "tabs"],
"action": {
"default_popup": "src/html/popup.html"
}
}
blocker.js
window.location.href = chrome.runtime.getURL("html/popup.html");
Page blocked Image
Either add blocked.html to web_accessible_resources in manifest.json or switch to using declarativeRequest API

Chrome extension js script only running when icon is clicked

hi i have been having a problem with creating a chrome extension the extensions js script dosent run unless i click on the icon and let the extension html stay there if i close the little icons menu it stop the javascript file too
is there a way to let the script run when the tab opens and finish the timeout?
and would it be better to use the chrome.alarm then setTimeout?
here is the manifest
{
"manifest_version": 2,
"name": "test",
"description": "",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["style.css"],
"js": ["main.js"]
}
],
"permissions": [
"activeTab",
"storage",
"tabs"
]
}
here is the main.js
check();
function check(){
setTimeout(function(){ alert('hi'); }, 3000);
}
chrome.tabs.onCreated.addListener(function(tab){
alert('hi');
})
the function and chrome.tabs.onCreated only fires when i click the icon and open the popup html

Chrome extension - select2 library working into console but not in content.js

Hello i'm working on a google chrome extension and workaround with https://select2.github.io .
Here is my manifest:
{
"manifest_version": 2,
"name": "Extension Test",
"description": "Test extension",
"version": "1.0",
"content_scripts": [
{
"matches": ["https://www.mywebsite.com/*"],
"js": ["jquery-1.11.3.js", "content.js"]
}
],
"background": {
"scripts": ["jquery-1.11.3.js","background.js"]
},
"permissions": [
"activeTab",
"webNavigation",
"*://*/*"
]
}
Here is what i run directly into console:
$('#myselect2').select2('open');
Then the same code into content js is not working and firing the following error:
content.js:151 Uncaught TypeError: $(...).select2 is not a function
Is it possible to open select menu from extension to content of website and if so how ?
Try Replacing with
{
"manifest_version": 2,
"name": "Extension Test",
"description": "Test extension",
"version": "1.0",
"content_scripts": [
{
"matches": ["https://www.mywebsite.com/*"],
"js": ["jquery-1.11.3.js", "content.js"]
}
],
"background": {
"scripts": ["jquery-1.11.3.js","background.js"]
},
"permissions": [
"activeTab",
"webNavigation",
"*://*/*"
]
}
you are missing a '"' in the matches property.
It looks like you are not including the select2 plugin in your extension. Download it into your extension and, in your manifest, add:
"js": ["jquery-1.11.3.js", "select2.min.js", "content.js"]

How to add user-script like tamparmonky on chrome extention

Hello i am trying to create a chrome extension. It like tampermonky. It add some user script. But the problem is some variable show undefined, But when i use the same script on tampermonky there is no error.
My extension manifest.json is
{
"name": "SayHello",
"description": "It will say hello when a page finishied load.",
"version": "0.4",
"permissions": [
"tabs",
"<all_urls>",
"storage"
],
"browser_action": {
"default_icon": "icon.png"
},
"options_page": "options.html",
"content_scripts": [
{
"exclude_globs":[],
"include_globs":["*"],
"matches": [
"http://www.amazon.com/*",
"https://www.amazon.com/*"
],
"js": ["email.js"],
"run_at": "document_end"
}
],
"converted_from_user_script": true,
"manifest_version":2
}
and email.js is.
P.when("jQuery","ready").execute(function(t){
var i="http://www.amazon.com/gp/profile/A3U7NCDBQ95EJM/customer_email";
t.get(i,function(t){
var o=t.data.email;
console.log('o:'+o);
});
return t;
});
error massage is Uncaught ReferenceError: P is not defined

Categories