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?

Why after installing Chrome app, it fires on new tab?

I created a Chrome app you can try it here
https://chrome.google.com/webstore/detail/style-scout/chbdclbnkfcocaolknbjmmppendkmebh
but after I install it and I open a new tap the app fires immediately and only for the very first time... why is that happening?
manifest is
{
"background":
{
"scripts": ["background.js"]
},
"browser_action":
{
"default_icon": "icon-128.png",
"default_title": "Style Scout"
},
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
"name": "Style Scout",
"short_name": "Style Scout – Fonts & Colors Finder",
"description": "Fonts & Colors Finder",
"homepage_url": "https://stylescout.org",
"icons":
{
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png"
},
"permissions": ["tabs", "http://*/*", "https://*/*", "storage"],
"version": "0.612",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["activate-np-chrome.js"]
}],
"web_accessible_resources": ["np-chrome.js"]
}
and background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {
file: "np-chrome.js"
})
});
np-chrome.js is the actual full script of my app...

ok I completely removed this part
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["activate-np-chrome.js"]
}],
"web_accessible_resources": ["np-chrome.js"]
and now it works, because I didn't know that content_scripts actually inject and fire the script for every single tab ever, whereas i just needed to fire my script when the user clicks my browser button

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"]

Chrome extension background.js file reload

EDIT
My chrome extension calling an api service in the background.js file and i can get the data. But after closing the browser window, i cant get the data from the api service in background.js file. It showing null value. When go to the chrome://extensions/ and reload the extension I can get the data.
When close the browser window, the data fetched is being reset and when open the browser, data not fetching. Data can be fetched from the api only after reloading the extension.
Why happening so. Does any one have an idea about this?
This is my manifest.json file
{
"manifest_version": 2,
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"name": "Test",
"short_name": "Test",
"description": "Test",
"version": "3.0.0",
"background": {
"scripts": [
"build/background-bundle.js"
]
},
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"cookies",
"storage",
"activeTab",
"http://*/",
"https://*/"
],
"content_scripts": [{
"matches": [
"<all_urls>"
],
"js": [
"build/content-bundle.js"
],
"run_at": "document_end"
}],
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"content_security_policy": "script-src 'self' https://www.google-analytics.com/analytics.js https://api.algorithmia.com/v1/algo/algo://nlp/SummarizeURL/0.1.1; object-src 'self'"
}

You can't reload the background file based on anything other than reopening the browser or reloading the extension manually. What you should instead do is have a content script tell background.js to run getTaxonomyList again when the user log in happens.
background.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.userLoggedIn) {
getTaxonomyList().done(function(list) {
sendResponse(list);
});
}
})

Custom newtab page: content script won't receive message from bgscript

I am building a Chrome extension that injects some HTML and JS when the user clicks the extension icon. So, when the icon is clicked, it is registered in the bg script, and the content script is notified about this like so:
Background script
chrome.browserAction.onClicked.addListener(iconClicked)
function iconClicked(tab) {
var visitors = window.AllVisitors.get(tab.id),
data = {
message: 'toggleMenu',
user: window.user
};
chrome.tabs.sendMessage(tab.id, data);
}
Now, to the problem: In my manifest file, I have also added a custom page for the chrome://newtab page. When the extension icon is clicked while visiting this custom newtab page, the content script does not receive any message what so ever. The default newtab page does actually receive the message as well as any other webpage.
I am thinking that maybe it has something to do with externally_connectable, but adding this does not help:
"externally_connectable": {
"matches": ["chrome://newtab/"],
}
Does anybody know why my custom newtab page does not receive any messages from the background script? Any help is very appreciated!
Manifest file:
{
"manifest_version": 2,
"name": "Orbit",
"version": "0.0.1",
"web_accessible_resources": [
"templates.html",
"img/icon48.png",
"fonts/*.woff",
"img/*"
],
"externally_connectable": {
"matches": ["chrome://newtab/"],
},
"chrome_url_overrides" : {
"newtab": "tab/newtab.html"
},
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"browser_action": {
"default_icon": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"default_title": "Orbit"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["vendor/chrome-promise.js", "vendor/jquery.js", "vendor/underscore.js", "vendor/backbone.js", "orbit.js"]
},
{
"matches": ["<all_urls>"],
"css": ["sidebar.css"]
}
],
"background": {
"scripts": ["vendor/socket.io.js", "vendor/jquery.js", "vendor/underscore.js", "vendor/backbone.js", "vendor/chrome-promise.js", "vendor/jquery.js", "eventPage.js"],
"persistent": true
},
"permissions": [
"http://fonts.googleapis.com/*",
"https://fonts.googleapis.com/*",
"https://get-orbit.com:8080/*",
"activeTab",
"tabs",
"storage"
]
}

Content scripts aren't injected on chrome-extension:// pages.
Simply add the script manually in your newtab.html:
<html>
<head>
<script src="your-content-script.js"></script>
</head>