We Keep Coding

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

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?

find.find() and browser.find.highlightResults() not working for firefox 61 extension

I want to make an extension for firefox v 61 using find.find() docs and find.highlightResults docs. I have added find as part of the permissions section on my manifest.json as suggested, and i tried the example script found on highlightResults, and it doesn't seem to be running.
{
"manifest_version": 2,
"name": "find words",
"version": "1.0",
"description": "highlights words found on random website",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["test.js"]
}
],
"permissions": [
"webNavigation",
"webRequest",
"find"
]
}
and the code bit for test.js looks like this:
function found(results) {
console.log(`There were: ${results.count} matches.`);
if (results.count > 0) {
browser.find.highlightResults();
}
}
browser.find.find("banana").then(found);
What am I missing?

How my chrome extension can be run automatically?

In this extension, if I click on the extension button and if current URL matches http://example.com/* or https://example.com/* it should be redirected to a new domain like http://NewDomain/* or https://NewDomain/*.
But I want this extension scan tab URL and perform redirection automatically in the following conditions:
if a new tab created or
if current tab URL changes
This is my code:
manifest.json
{
"manifest_version": 2,
"name": "My Extension",
"description": "Redirect example.com to NewDomain",
"version": "0.1",
"permissions":
[
"activeTab",
"tabs",
"background"
],
"browser_action":
{
"default_icon": "icon.png"
},
"content_scripts":
[
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}
]
}
scripts.js
var current_url = tab.url.split('/');
if(current_url[2] == "example.com")
{
current_url[2] = "NewDomain";
}
var new_url = current_url.join('/');
console.log('New tab url: ' + new_url);
document.location.href = new_url;
But it's not working, What changes should I apply?

Use a content script instead and drop the browser_action.
Then you can use document.location.href = "urlToRedirectTo";
The url matching can be done in the manifest
You have two options. Either specify the url to match in the manifest or match every url and check the url in the content script.
For example, this manifest will match all urls:
{
"manifest_version": 2,
"name": "whatever",
"description": "blah",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}
],
"permissions": [
"activeTab"
]
}
And in the content.js, you could do something like this:
if (document.location.href == "theUrlImLookingFor")
document.location.href = "theUrlThatIRedirectTo";

alert a box when URL and tab changed

I'm beginner in writing extensions for Chrome and I'm solving some tasks to learn.
I want to alert the anything when I changed tab and/or URL of current tab. For testing I've added following lines to manifest file:
"background_page": "background.html",
"permissions": [
//"activeTab",
"tabs"
//"http://*/*",
//"https://*/*",
//"https://secure.flickr.com/"
],
But in chrome://extensions page it says
'background_page' requires manifest version of 1 or lower.
Full manifest.json:
{
"manifest_version": 2,
"name": "Remove unwanted adds",
"description": "This extension prevents your browser to load adds.",
"version": "1.0",
//"background": {
// "scripts": [ "background.js" ]
//},
"content_scripts": [
{
"matches": [ /*"localhost/dental/frontend/patient/signin"*/ "http://someurl" ], // change this to 192.168.5.20/login.html
//"css": [ "mystyles.css" ],
"js": [ /*"jquery.js", "myscript.js"*/ "mainscript.js" ]
}
],
"background_page": "background.html",
"permissions": [
//"activeTab",
//"background",
//"clipboardRead",
//"clipboardWrite",
//"storage",
"tabs"
//"http://*/*",
//"https://*/*",
//"https://secure.flickr.com/"
],
"browser_action": {
//"default_icon": "img/icon.png",
"default_popup": "popup.html"
}
}
I have also tried this method (source):
"content_scripts": [
{
"matches": [ /*"localhost/dental/frontend/patient/signin"*/ "http://someurl" ],
//"css": [ "mystyles.css" ],
"js": [ /*"jquery.js", "myscript.js"*/ "mainscript.js" ]
}
],
in mainscript.js I only wrote this line:
alert("navigated!");
I don't know but this one also not working when I'm navigating to that someurl.
So,
1) what's going wrong in my codes
2) what's the best way to solve this task?
Thanks.

You cannot have comments in json files. Json files are just for data

1)
'background_page' requires manifest version of 1 or lower.
To fix the problem causing this message, your manifest(in respect to background page) should look like this (source):
{
"name": "My extension",
...
"background": {
"page": "background.html"
},
...
}
Regarding your content script called mainscript.js not executing, I would first try to change the matches to cover all urls like this:
"matches": [ "<all_urls>" ]
If the content script starts working, then construct a pattern that would satisfy your needs with the rules mentioned here.
2) I suggest you look at chrome.tabs API especially the onCreated, onUpdated and onSelectionChanged events.

How can I call functions defined in a Chrome Extension from regular websites?

I'd like to make a website that is not part of the chrome plugin but rather just uses some API that the plugin exposes to it. Is this possible and if so, how do I do it? I googled this question and was unable to find anything.
I'm trying to use content scripts but nothing happens. Can someone explain what's wrong here?
manifest.json
{
"manifest_version": 2,
"name": "Hello World Extension",
"description": "This extension prints hello world.",
"version": "1.0",
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://locahost:8888/*"],
"js": ["EmotivAPI.js"]
}
]
}
EmotivAPI.js
var port = chrome.runtime.connect();
console.log("Hello?");
window.addEventListener("message", function (event) {
// We only accept messages from ourselves
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
console.log("Content script received: " + event.data.text);
port.postMessage(event.data.text);
alert("recieved!");
}
}, false);
js in the webpage
window.sayHello = function () {
window.postMessage({ type: "FROM_PAGE", text: "Hello from webpage!" }, "*");
}
console.log('Emotiv extension loaded.');
}
I'm calling window.sayHello() from the console

Content Scripts can help you in this case.
The content script will be injected into a page:
"content_scripts": [
{
"matches": ["http://www.google.com/*"], // try with "http://localhost:*/*" or "http://localhost:*"
"css": ["mystyles.css"],
"js": ["content_script.js"]
}
]
If you want to inject the code only sometimes, use the permissions field instead
/* in manifest.json */
"permissions": [
"tabs", "http://*/*"
],
In you extension html file, you can then execute the script by:
chrome.tabs.executeScript(null, {file: "content_script.js"});