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

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

Related

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?

Cannot read property 'onBeforeNavigate' of undefined (Chrome Extension)

I simpley want to get the extension fired if the action on 'onBeforeNavigate' happens. But for no reason the extension always trows this error:
Cannot read property 'onBeforeNavigate' of undefined
Error is on this line chrome.webNavigation.onBeforeNavigate.addListener(setProxy);
Here is my code so far:
popup.js
function setProxy(details){
console.log("Got fired!\n");
}
chrome.webNavigation.onBeforeNavigate.addListener(setProxy);
manifest.json
{
"manifest_version": 2,
"name": "Proxy Changer",
"description": "This extension Changes the Proxy settings every time you load a website",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"activeTab",
"webRequest",
"notifications",
"debugger",
"background",
"management",
"https://ajax.googleapis.com/",
"<all_urls>",
"webRequestBlocking"
],
"background": {
"scripts": ["popup.js"],
"persistent": true,
"js": ["jQuery.js", "popup.js"]
}
}
I hate to say that I am very new to the Google Chrome Extension API but for me the Extension API is not working... I don't know what I am doing wrong..
I already watched to videos but still same error...
I would appreciate your help. Thank you and kind regards!
just add "webNavigation" permission to Manifest.json
{
"name": "My extension",
...
"permissions": [
"webNavigation"
],
...
}
see documentation
https://developer.chrome.com/docs/extensions/reference/webNavigation/#event-onCreatedNavigationTarget

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.

Chrome extension - onclick icon event

As you can see, I have a problem with onclick event in chrome extension and I need your help.
$(function jony() {
jQuery.each( jQuery('img'), function() {
jQuery(this).attr('src', 'urlimage');
});
});
chrome.browserAction.onClicked.addListener(function(tab) {
jony();
});
Manifest:
{
"manifest_version": 2,
"name": "Jonyzátor",
"description": "Change images on page to JoNy!",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Klikni na mě!"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
],
"content_scripts": [ {
"js": [ "jquery.js", "jonyza.js"],
"matches": [ "http://*/*", "https://*/*"]
}]
}
The scope in which jony is defined is limited to $(); outside it's simply undefined.
function jony() {
jQuery.each( jQuery('img'), function() {
jQuery(this).attr('src', 'urlimage');
}
$(jony); // Will execute on page load
// and you can still use it here
I'm not sure it was the logic you intended - do you want it to run both at page load AND when you click?
You can't use browserAction API in content scripts. The proper place for it would be a background (or event) script, and then you can message your content script to do something.

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