I have a simple app that I'm using to learn Chrome Extensions.
I cannot get break points to work in mainscript.js file in the debugger.
I couldn't see mainscript.js under Pages or Content Scripts.
I can see it when I load Filesystem and apply breakpoints but they are not breaking.
The alert is being displayed.
How do I set break points that work in mainscript.js?
Manifest:
{
"name": "Enable/Disable",
"version": "1.0",
"manifest_version": 2,
"description": "Enables/Disables",
"permissions":
[
"http://xxx.xxx.xxx.xxx/*",
"activeTab"
],
"browser_action":
{
"default_icon":
{
"16": "images/Icon_ENABLED.png"
}
},
"background":
{
"scripts": ["background.js"]
}
}
background.js:
chrome.browserAction.onClicked.addListener
(
function(tab)
{
chrome.tabs.executeScript(tab.id, {file: "mainscript.js"});
}
);
mainscript.js
alert('Mainscript');
Related
I found this answer on how to grab the page source of current tab:
Getting the source HTML of the current page from chrome extension
However, this answer requires user to press the extension popup.
I would like to know how I can access the page source upon loading of page (without having to invoke the popup).
In my background.js I've tired this:
chrome.tabs.onUpdated.addListener(function (tabId , info) {
console.log(info)
chrome.tabs.executeScript(null, {
file: "getPagesSource.js"
}, function() {
if (chrome.runtime.lastError) {
message.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message;
}
});
});
but this results in the following error:
There was an error injecting script : Cannot access contents of the
page. Extension manifest must request permission to access the
respective host.
My manifest.js:
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["declarativeContent",
"https://www.example.com/*",
"storage",
"activeTab"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"options_page": "options.html",
"manifest_version": 2,
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
}
I don't think the issue is really with permissions because I am able to get the page source from the popup.html (which is page_action script). But I am not able to get it via "background" or "content_scripts". Why is that and what is the proper way to accomplish this?
It is about the permissions.
Your example a bit insufficient, but as I can see you are using "activeTab" permission.
According to the activeTab docs, the extension will get access (e.g. sources) to current tab after any of these actions will be performed:
Executing a browser action
Executing a page action
Executing a context menu item
Executing a keyboard shortcut from the commands API
Accepting a suggestion from the omnibox API
That's why you can get sources after opening the popup.
In order to get access to tabs without those actions, you need to ask for the following permissions:
tabs
<all_urls>
Be noted, it allows you to run content-script on every tab, not only the active one.
Here is the simplest example:
manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["tabs", "<all_urls>"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
background.js
chrome.tabs.onUpdated.addListener(function (tabId, info) {
if(info.status === 'complete') {
chrome.tabs.executeScript({
code: "document.documentElement.innerHTML" // or 'file: "getPagesSource.js"'
}, function(result) {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
} else {
console.log(result)
}
});
}
});
I have connected web page with the chrome extension. Collecting response in background.js. Following is my code:
manifest.json
{
"manifest_version": 2,
"name": "CIC Wallet",
"description": "The CIC Wallet in your browser",
"version": "1.0",
"browser_action": {
"default_icon": "Image/CI_logo-01.png",
"default_popup": "popup.html"
},
"icons": { "16": "Image/CI_logo-01.png",
"48": "Image/CI_logo-01.png",
"128": "Image/CI_logo-01.png"
},
"background":{
"scripts": ["background.js"]
},
"externally_connectable": {
"matches": ["http://127.0.0.1:5500/main.html"]
},
"web_accessible_resources": [
"popup.js", "background.js"
],
"permissions": [
"activeTab"
]
}
background.js
chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
console.log('from webpage');
window.open("popup.html", "CIC Notification", "width=357,height=600,status=no,scrollbars=yes,resizable=no");
document.getElementById("sendtrform").style.display="block";
});
main.js
window.addEventListener('load', function load(event){
var createButton = document.getElementById('btn_buy_trust');
createButton.addEventListener('click', function() {
var laserExtensionId = "myextID";
chrome.runtime.sendMessage(laserExtensionId, 'Hi from Webpage',
function(response) {
});
});
});
main.js is the js file from my webpage, on button click, I am sending the message. In background.js, I am collecting the response and opens my extension HTML file in the separate window. Here in background.js, I am not able to access HTML elements from the popup.html file.
I am getting an error for this line:
document.getElementById("sendtrform").style.display="block";
Can somebody help me, how can I access HTML elements from background.js?
I'm using chrome messaging feature to send the filename and link to the background page
chrome.runtime.sendMessage({link: thelink, name:filename}, function(response) {});
The background.js
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
console.log(message.name);
chrome.downloads.download({
url: message.link,
filename: message.name,
conflictAction: 'prompt'
});
});
My manifest.json
{
"manifest_version": 2,
"name": "4ch",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"icons": {
"16": "4ch-icon-16.png", "48": "4ch-icon-48.png", "128": "4ch-icon-48.png"
}
,
"permissions": ["downloads",
"<all_urls>",
"contextMenus"],
"content_scripts": [{
"js": ["script/jquery.js", "script/reddit.js"],
"matches": ["*://*.reddit.com/*"]
}
],
"background": {
"scripts": ["script/jquery.js","script/eventpage.js"], "persistent": false
}
}
the download only starts after a few seconds and doesn't change the file name
I have ofund a solution. The 'download master' extension was in conflict with my own,hence it doesn't replace the original filename.I have disabled it
after reading the tutorials I still can't make my extension to work after clicking on it, it starts working as soon as the page loaded.
Here is my manifest.
{
"manifest_version": 2,
"name": "My extension",
"description": "This extension bla bla.",
"version": "3.0",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["make_changes.js"]
}
],
"background": {
"scripts": ["make_changes.js"],
"persistent": false
}
}
and here is my make_changes.js:
var oldSource = document.documentElement.innerHTML;
document.body.innerHTML = Make_change(oldSource);
function Make_change(source){
...
}
I've also got the background.HTML file, but it works without it. It seems that it is not correct:
chrome.tabs.executeScript(null, {file: "make_changes.js"});
You need to add a listener for the browser action onClicked event:
http://developer.chrome.com/extensions/browserAction.html#event-onClicked
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "make_changes.js"});
});
My chrome extension background script is not being loaded. I followed Googles guide for them but still nothing. I'm not sure if there is another way to check but it isn't in Inspect Element and what the script should be doing isn't happening.
http://developer.chrome.com/extensions/background_pages.html
manifest.json file
{
"manifest_version": 2,
"name": "WebDevFriend",
"description": "blah blah blah",
"version": "1.0",
"permissions": [
"bookmarks",
"tabs",
"http://*/*" ],
"background": {
"scripts": ["js/settings.js"],
},
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "html/popup.html"
}
}
settings.js file
chrome.windows.onCreated.addListener(function(window){
chrome.windows.getAll(function(windows){
var length = windows.length;
if (length == 2) {
chrome.tabs.executeScript(null, {file: "content_script.js"});
}
});
});
document.write('hello');
First you can't view the background page like a regular html page.
The only way is to view its contents with the Chrome Developer Tools.
just click on generated_background_page.html in the extensions section of your browser.
Second use the console.log() statement to log messages.