I did simple example page redder as given in chrome api page example. There, they used background script to change the background color via executeScript. I don't want to do that, I want to use content script only (easier access to DOM). Here is my code:
1) manifest.json
{
"manifest_version": 2,
"name": "Modified page redder example",
"version": "1.0",
"icons": { "16": "icon_16.png",
"48": "icon_48.png",
"128": "icon_128.png" },
"permissions": [
"activeTab"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"content_scripts" : [
{
"matches" : [ "<all_urls>" ],
"js" : [ "contentscript.js" ]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Load apps"
}
}
2) myscript.js
document.getElementById('btchange').onclick=function(){
chrome.runtime.sendMessage('red');
}
3) popup.html
<html>
<body>
<input type='button' value='change' id='btchange'>
<script src='myscript.js'></script>
</body>
</html>
4) contentscript.js
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse){
//chrome.tabs.executeScript({code: 'document.body.style.backgroundColor = "'+request+'"'});
alert(request);
}
);
I don't receive the result as I want. No error. No promt (by alert red).
Related
I am an creating chrome extension using html css3 and Javascript now the problem is that can i get image url on mouseover any website and show the image into my chrome extension. below the code given manifest file. I don't find any function use content script to get the image Url
Manifest File
{
"manifest_version": 2,
"name": "React Extention",
"author": "Muhammad Yousuf",
"version": "1.0.1",
"options_page": "index.html",
"description": "Replace new tab screen with GitHub trending projects.",
"web_accessible_resources": ["index.html"],
"incognito": "split",
"icons": {
"16": "logo.png",
"48": "logo.png",
"128": "logo.png"
},
"content_scripts": [
{
"matches": ["*://*.dawn.com/*"],
"js": ["content-script.js"]
}
],
"browser_action": {
"default_title": "Extention"
},
"background": {
"scripts": ["background.js"],
"presistent":false
},
"content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'",
"permissions": ["tabs", "http://*/*", "storage"]
}
Here I've detected hovered element first then I've checked its tag name
var hovered_elemnet = (window.event) ? window.event.srcElement : e.target;
console.log("hovered_elemne",hovered_elemnet.tagName)
if (hovered_elemnet.tagName == "IMG") {
console.log("src--",clickedElement.src);
}
document.body.onmouseover = (event)=>{
if (event.target.nodeName === 'IMG') {
console.log(event.target.src)
}
}
I'm using the example here as a starting point for accessing some DOM elements on the user's current tab. In popup.html, I have the following:
<script type="text/javascript" src="popup.js"></script>
And the first lines of popup.js are:
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log("test");
console.log('Turning ' + tab.url + ' red!');
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="red"'
});
});
Manifest.json has the following permissions:
{
"manifest_version": 2,
"name": "",
"version": "1.0",
"description": "",
"icons": { "16": "icon16.jpg",
"48": "icon48.jpg",
"128": "icon128.jpg" },
"minimum_chrome_version": "46",
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.min.js", "getDescription.js"],
"run_at": "document_start"
}],
"options_page": "options.html",
"permissions": ["<all_urls>", "tabs","storage", "activeTab"]
}
Nothing is appearing in console, as if function isn't firing at all.
As it mention here onClicked fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
If you want to have the popup and then to execute a script when the icon is clicked use below approach.
{
"name": "My Extension",
"version": "0.1",
"manifest_version" : 2,
"description": "la lala laa",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
Inside the background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "popup.js"});
});
Or it should work fine if you have below in your popup.html
<script src="popup.js"></script>
Inside your popup.js
window.onload = function() {
console.log("do whatever you want here !!!")
}
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
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);
});
}
})
I tried to build simple extension according to the examples:
from here and here
and I must be doing something wrong here.
All I want is for start that on each loading page ( or even better before loading ) it will popup
hello alert
manifest.json
{
"background": {
"page": "background.html"
},
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"js": ["jquery-1.8.2.min.js","contentscript.js"],
"run_at": "document_end"
}
],
"web_accessible_resources": [
"script_inpage.js"
],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Test 123"
},
"content_security_policy": "script-src 'self'; media-src *; object-src 'self'",
"description": "Simple Test 123.",
"manifest_version": 2,
"minimum_chrome_version": "18",
"name": "Test 123",
"permissions": [
"unlimitedStorage",
"http://*/",
"tabs",
],
"version": "2.6"
}
background.html is empty for now
contentscript.js:
var s = document.createElement('script');
s.src = chrome.extension.getURL('script_inpage.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
s.parentNode.removeChild(s);
};
script_inpage.js:
alert("this is script");
There is no error even when I trigger the developer console window.
Your manifest file is invalid, there's a superfluous comma after the last entry in the "permissions" section:
"permissions": [
"unlimitedStorage",
"http://*/",
"tabs", // <-- Remove that comma
],
If you want your script to run as early as possible, use "run_at": "document_start" instead of "document_end". Then, your script will run before <head> and <body> even exist.