Develop Reference

Block drop of file into chrome via content script

I am trying to block all drop event via content script in chrome extension. However, the code is getting executed as I can get console.log output, but drop of file is not prevented.
inject.js file:
console.log("worked?");
document.addEventListener("ondrop", function(event){
event.preventDefault();
}, false)
document.addEventListener("dragstart", function(event){
event.preventDefault();
}, true);
document.addEventListener("dragenter", function(event){
event.preventDefault();
}, true);
document.addEventListener("dragleave", function(event){
event.preventDefault();
}, true);
document.addEventListener("drag", function(event){
event.preventDefault();
}, true);
manifest.json file:
{
"name": "BlockDrop",
"version": "0.0.1",
"manifest_version": 2,
"description": "Block dropping of files .",
"homepage_url": "http://sample.com?explode_chrome",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": true
},
"browser_action": {
"default_icon": "icons/icon19.png",
"default_title": "browser action demo",
"default_popup": "src/browser_action/browser_action.html"
},
"permissions": [
"clipboardRead",
"clipboardWrite",
"cookies",
"https://*/*",
"http://*/*"
],
"content_scripts": [
{
"matches": [
"https://*/*",
"http://*/*"
],
"js": [
"src/inject/inject.js"
],
"run_at" : "document_idle"
}
]
}

Passing variable from Content.js to Background.js

I'm trying to use a variable I created in content.js in my background.js file.
Currently, when I try to use a variable in my background.js that was created in my content.js, I get a chrome error saying "Unexpected Identifier" (referencing ContentTag1 in background.js)
Do you know how I can do this?
Code from my Background.js File
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
if data[i].DBTag == ContentTag1 {
var div = document.createElement("div");
div.innerHTML = 'Name: ' + data[i].Name + ' ' + data[i].Price;
mainContainer.appendChild(div);
}
}
}
Code from my Content Script
var ContentTag1 = "test";
var ContentTag2 = "test";
var ContentTag3 = "test";
Manifest Below:
{
"name": "App",
"version": "1.0",
"description": "Description",
"permissions": [ "activeTab", "declarativeContent", "storage", "http://localhost:3000/brands"],
"background": {
"scripts": [ "js/lib/jquery.min.js", "js/app/background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [ "https:/somesite*" ],
"css": ["style.css"],
"js": [
"js/lib/jquery.min.js",
"js/app/content.js"
],
"all_frames": false
}
],
"web_accessible_resources": ["content.html",
"content.css",
"css/popup.css"
],
"browser_action": {
"default_popup": "views/popup.html",
"default_icon": {
"16": "images/someimage.png",
"32": "images/someimage.png",
"48": "images/someimage.png",
"128": "images/someimage.png"
}
},
"icons": {
"16": "images/someimage.png",
"32": "images/someimage.png",
"48": "images/someimage.png",
"128": "images/someimage.png"
},
"manifest_version": 2
}

You should send a message from content and add a listener on background
here an answer that show example of that.
Also you may find here the documentation about messaging in chrome extention.

Is there any explanation why $ or jQuery is not working in chrome extension development?

I have downloaded the jquery compressed, production jQuery 3.5.1 slim build file in project root directory, and added in manifest file, then tried to run jQuery functions using $ sign, I tried to do it in content script and background script, but I got error Uncaught ReferenceError: $ is not defined.
manifest.json
"name": "Project",
"version": "1.0",
"description": "Lorem Ipsum is simply dummy text of the printing",
"permissions": ["activeTab", "declarativeContent", "storage","https://*/"],
"options_page": "options.html",
"background": {
"scripts": ["background.js","jquery.js"],
"persistent": true
},
"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"
},
"content_scripts":[{
"matches" : ["https://www.amazon.com/s?*"],
"js" : ["content.js","jquery.js"]
}],
"manifest_version": 2
}
content.js
chrome.runtime.sendMessage({productLink: 'test', search_url: url.href }, function(response) {
console.log(`message from background: ${JSON.stringify(response)}`);
});
function isProductUrl(url){
let arr = url.split('/');
if(arr[4] == 'dp')
return true;
else
return false;
}
$.ajax({
url: "www.localhost.com/search",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});

Send message from option page to content script

In chrome documentation, we can send message from option page by using:
chrome.runtime.sendMessage
We cannot use:
chrome.tabs.sendMessage
I want to send message from option page to content script. Can I do it directly?
This is my option page script:
document.addEventListener("DOMContentLoaded", function() {
var radio = document.querySelectorAll("input[type=radio][name=quality]");
for(i=0; i<radio.length; i++)
radio[i].addEventListener("change", function(){
val = this.id;
localStorage.setItem("youtube_filter_video_quality", val);
chrome.runtime.sendMessage({"youtube_filter_video_quality": val});
});
});
And here is content script:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(request.youtube_filter_video_quality!==undefined){
console.log(request.youtube_filter_video_quality);
}
}
);
And here is manifest.json:
{
"name": "__MSG_name__",
"short_name": "__MSG_short_name__",
"manifest_version": 2,
"version":"1.5.0.0",
"description": "__MSG_description__",
"default_locale": "en",
"browser_action": {
"default_icon": "48.png",
"default_title": "__MSG_default_title__",
"default_popup": "popup.html"
},
"background":{
"page":"background.html",
"persistent": false
},
"content_scripts":[
{
"matches": [ "*://*.youtube.com/*" ],
"css": ["app_player.css"],
"run_at": "document_end"
}
],
"permissions": [
"tabs",
"activeTab",
"storage",
"<all_urls>",
"webNavigation"
],
"icons": {
"64":"64.png",
"48": "48.png",
"32":"32.png",
"16": "16.png",
"128": "128.png"
},
"options_page": "options.html",
"options_ui": {
"chrome_style": true,
"page": "option.html"
}
}
The console.log cannot write anything (blank).

Background.js not working Chrome Extension

I'm new to chrome extensions and cannot seem to figure out how the background concept works. I am building a counter extension that keeps counting even when the user closes the extension (but not the browser) and wanted to do a simple test to see if I could figure out how to use the background file. Below is my attempt to create a function that activates everytime a user clicks on a tab (outside of my extension) and when they click on 5 tabs, the alert hits. I cannot figure out why this doesn't work.
background.js:
var counter = 0;
chrome.browserAction.onClicked.addListener(function(tab){
counter++;
if (counter == 5) {
alert("Hi");
}
});
manifest.json:
{
"name": "Hello World!",
"description": "My first packaged app.",
"version": "0.1",
"permissions": ["tabs", "http://*/*"],
"manifest_version":2,
"content_scripts": [ {
"js": [ "jquery-1.9.1.js", "myscript.js" ],
"matches": [ "http://*/*", "https://*/*"]
}],
"background": {
"scripts": [
"background.js"
]
},
"browser_action": {
"default_title": "10,000 Hours",
"default_icon": "icon16.png",
"default_popup": "index.html"
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}

It is working for me with following code.
manifest.json
{
"name": "Popping Alert",
"description": "http://stackoverflow.com/questions/15194198/background-js-not-working-chrome-extension",
"background": {
"scripts": [
"background.js"
]
},
"version": "1",
"manifest_version": 2,
"browser_action": {
"default_title": "Click Me"
}
}
background.js
var counter = 0;
chrome.browserAction.onClicked.addListener(function (tab) {
counter++;
if (counter == 5) {
alert("Hey !!! You have clicked five times");
}
});
Can you share your related code or put your problem statement clearly if this does not work?