alert a box when URL and tab changed - javascript

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.

Related

Chrome Extension Using Manifest 3 and Multiple Scripts

I am trying to import scripts and am apparently only able to get one. I am using this manifest:
{
"manifest_version": 3,
"name": "Auto_Select",
"description": "This extension auto selects Mturk HITs",
"version": "1.0",
"action": {
"default_icon": "auto_select.png",
"type": "module",
"default_popup": "auto_select.html"
},
"background": {
"service_worker": "worker_wrapper.js"
},
"permissions": [
"tabs",
"activeTab"
],
"host_permissions": [
"<all_urls>"
]
}
This is "worker_wrapper.js":
try {
importScripts("js.cookie.js", "auto_select.js", "cookie_mgmt.js");
} catch(e) {
console.log(e);
}
When I try to load the extension I get this error:
ReferenceError: document is not defined
at auto_select.js:26:1
at worker_wrapper.js:4:5
All the scripts are in the root directory for the extension so I don't understand why it doesn't error on the first script but rather on the 2nd. Can someone help me with this? TIA.

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?

Chrome Extension - log scroll data and send to storage.sync

I've been trying to write a chrome extension that tracks all of a users scrolling across their browser window and sends this data to chrome.storage.sync
I've been unsuccessful in seeing any data recorded in chrome.storage and am not sure if this because of the scroller.js script I have included below or if I have not directed to .storage correctly.
I haven't been able to find a solution from other answers posted here so any help would be greatly appreciated!
manifest.json
{
"manifest_version": 2,
"name": "Caressing the Silver Rectangle",
"description": "Measures Jesse Bowling's distance scrolled in pixels on Google Chrome",
"version": "1.0",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"scroller.js"
],
"run_at": "document_start"
}
],
"background": [
{ "scripts": ["https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"]
}
],
"browser_action": {
"default_icon":"icon.png",
"default_title": "Caressing the Silver Rectangle",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"<all_urls>",
"tabs",
"storage"
]
}
scroller.js
/*jslint devel: true */
var totalScroll;
var lastKnownScrollPos = 0;
window.addEventListener("scroll", function () {
"use strict";
console.log(lastKnownScrollPos);
totalScroll += Math.abs(window.scrollY - lastKnownScrollPos);
lastKnownScrollPos = window.scrollY;
chrome.storage.local.sync({ scroll: totalScroll });
});
There is no method .sync.
To put a data into the storage you should use:
chrome.storage.local.set({scroll: totalScroll})
Consider, what kind of storage do you need:
- local storage is used to keep a data locally, inside a chrome instance
- sync storage helps to sync data between browsers
The chrome.storage.sync and chrome.storage.local implements StorageArea interface. Its methods are described here

Trying to make an extension

I have an extension that i'm trying to add content scrips alongside background scripts but it just says invalid when trying to temp load.
{
"description": "Creates tasks and calculates application incomplete date",
"manifest_version": 2,
"name": "Task Creator",
"version": "1.31",
"permissions": [
"http://*/*", "tabs", "https://*/*",
],
"icons": {
"48": "icons/page-48.png"
},
"web_accessible_resources": [
"style/popUpStyle.css",
"script/popUpTask.js",
"script/logicTaskFiller.js",
"js/autosize.js",
"style/jquery-ui.css",
"js/jquery-1.12.4.js",
"js/jquery-ui.js"
],
"content_scripts":{
"matches": ["*urlhere.com*"],
"js": ["comSendForm.js"]
},
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icons/page-32.png"
}
}
I'm not quite sure where i'm messing up. It works instantly after I take out the content scripts, but I'm doing multiple things with this extension and I really do need the content scripts to run on a certain page. Any help is appreciated.
error message
1477430058898 addons.webextension. ERROR Loading extension 'null': Reading manifest: Error processing content_scripts: Expected array instead of {"matches":["*://url.com/"],"js":["comSendForm.js"]}
The error that you are getting is that your manifest.json has the value of the content_scripts key as an Object. The value of the content_scripts key needs to be an Array of Objects, not just an Object.
In addition, you have the following problems:
The line:
"http://*/*", "tabs", "https://*/*",
should not have the trailing ,. This is actually reported as the first error, so you may have copied the contents of your manifest.json file inaccurately.
Your matches pattern is invalid. You probably wanted something like:
"matches": ["*://*.urlhere.com/"],
With all of those changes your manifest.json would look like:
{
"description": "Creates tasks and calculates application incomplete date",
"manifest_version": 2,
"name": "Task Creator",
"version": "1.31",
"permissions": [
"http://*/*", "tabs", "https://*/*"
],
"icons": {
"48": "icons/page-48.png"
},
"web_accessible_resources": [
"style/popUpStyle.css",
"script/popUpTask.js",
"script/logicTaskFiller.js",
"js/autosize.js",
"style/jquery-ui.css",
"js/jquery-1.12.4.js",
"js/jquery-ui.js"
],
"content_scripts": [
{
"matches": ["*://*.urlhere.com/"],
"js": ["comSendForm.js"]
}
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icons/page-32.png"
}
}

Unable to use jquery in google chrome extension

I am trying to use jquery to make a post ajax call and I have tried almost all the solutions on SO but none seem to work. My manifest is:
{"name": "__MSG_extName__",
"version": "0.1",
"manifest_version": 2,
"description": "__MSG_extDesc__",
"icons": {"16": "icon16.png", "128": "icon128.png"},
"background": {"persistent": false, "scripts": ["background.js"]},
"default_locale": "en",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-2.1.3.js"]
}
],
"permissions": ["contextMenus", "downloads", "downloads.open", "tabs", "http://*/*", "https://*/*"]}
The background.js file is like:
chrome.downloads.onCreated.addListener(function(downloadItem) {
console.log("Download Link is " + downloadItem.url)
chrome.tabs.executeScript(null, { file: "jquery-2.1.3.js" }, function() {
console.log("jquery is loaded");
var linkSync = {
"document": {
"downloadLink": downloadItem.url,
"isSynced": false},
"safe": true
};
$.post("url/to/post",
linkSync,
function( data ) {
console.log("Success" + data );
});
});
});
The error that I am getting is:
Download Link is http://www.mymp3song.com/files/download/id/33724
background.js:14 jquery is loaded
extensions::uncaught_exception_handler:8 Error in response to tabs.executeScript: ReferenceError: $ is not defined
at Object.callback (chrome-extension://kbhkaajolcelehoonafmkgaahfgphnok/background.js:22:2)
at chrome-extension://kbhkaajolcelehoonafmkgaahfgphnok/background.js:13:16
As you may see, I have added the jquery.js both programmatically and in the manifest but none seem to work. Even if I remove either of them it does not work. Can someone point to me what I should do to make it work?
If you want jQuery to function in your background page, you need to add it to the background page.
Both methods that you're trying to use are adding code to the content script context instead.
What you need is this:
"background": {
"persistent": false,
"scripts": ["jquery-2.1.3.js", "background.js"]
},
to load jQuery in your background page. Note that order matters.
I would recommend giving the Architecture Overview a look.
modify your your json to this and it will work for u
reference is Here
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]

Categories