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"
}
]
}
Related
Manifest.json
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"32": "icons/32x32.png"
}
},
"content_scripts": [
{
"matches": ["*://*/*"],
"run_at": "document_start",
"js": ["content-script.js"]
}
],
"permissions": [
"scripting",
"tabs",
"notifications",
"activeTab",
"webRequest"
],
"host_permissions": ["*://*/*", "https://*/*"],
"web_accessible_resources": [
{
"matches": ["*://*/*", "http://*/*", "https://*/*"],
"resources": ["web.js"]
}
],
"icons": {
"32": "/icons/32x32.png"
}
}
content-script.js
console.log("I am content script");
function injectScript() {
var script = document.createElement("script");
script.src = chrome.runtime.getURL("scripts/web.js");
script.type = "text/javascript";
console.log("Inserting Script", document);
document.head.appendChild(script);
}
injectScript();
web.js
console.log("I am web.js");
setInterval(() => {
console.log(window.test, "Test in setInterval");
}, 1000);
console.log(window.test, "Logging test from web.js");
// document.body.style.backgroundColor = "red";
Upon refreshing the page I am getting the following error
Not able to get what could be the issue, can someone guide me?
Thank You!
I'm trying to migrate my chrome pure JS extension into a vuejs version.
All my pureJS version works fine.
But with vuejs i have an unintelligible error loading extension.
Here is my manifest.json and my vue.config.js :
Manifest :
{
"manifest_version": 2,
"name": "__MSG_appName__",
"version": "2.1.0",
"homepage_url": "https://*****.*********/",
"description": "****** Vuejs",
"default_locale": "fr",
"permissions": [
"activeTab",
"<all_urls>",
"*://*/*",
"storage"
],
"icons": {
"48": "icons/icon-48.png",
"64": "icons/icon-64.png",
"128": "icons/icon-128.png"
},
"background": {
"scripts": [
"js/background.js"
],
"persistent": true
},
"browser_action": {
"default_popup": "popup.html",
"default_title": "__MSG_appName__",
"default_icon": {
"48": "icons/icon-48.png",
"64": "icons/icon-64.png"
}
}
}
vue.config.js :
module.exports = {
pages: {
popup: {
template: "public/browser-extension.html",
entry: "./src/popup/main.js",
title: "Popup",
},
},
pluginOptions: {
browserExtension: {
componentOptions: {
background: {
entry: "src/background.js",
},
contentScripts: {
entries: {
"content-script": [
"src/content_scripts/contentScript.js",
"src/content_scripts/config.js",
"src/content_scripts/capture.js",
],
},
},
permissions: [
"<all_urls>",
"activeTab",
"contextMenus",
"notifications",
"storage",
"identity",
],
browser_action: {},
},
},
},
};
Project is compiling without any problem.
Then i load my extension on browser by pointing to /dist folder.
And then i have the error Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked') and my extension show blank popup.
Here is the part of code which cause the error :
browser.contextMenus.onClicked.addListener(async (info, tab) => {
Of course i tried with "chrome" instead of "browser", without success...
Any help would be appreciated.
Thank you in advance.
I had the same issue,
Found out that you need to add "action": {} to your manifest.json.
{
"manifest_version": 2,
"name": "__MSG_appName__",
"version": "2.1.0",
"homepage_url": "https://*****.*********/",
"description": "****** Vuejs",
"default_locale": "fr",
"action": {},
"permissions": [
"activeTab",
"<all_urls>",
"*://*/*",
"storage"
],
"icons": {
"48": "icons/icon-48.png",
"64": "icons/icon-64.png",
"128": "icons/icon-128.png"
},
"background": {
"scripts": [
"js/background.js"
],
"persistent": true
},
"browser_action": {
"default_popup": "popup.html",
"default_title": "__MSG_appName__",
"default_icon": {
"48": "icons/icon-48.png",
"64": "icons/icon-64.png"
}
}
}
I replaced code by
browser.browserAction.onClicked.addListener(async (info, tab) => {
And it works.
I need to find the id of the element that holds text that I've selected, and I've been unsuccessful at finding a way to do this. It looks like the problem is with the fact that you can't use a getAttribute method on a window object. I am using a content script that communicates with an event page to carry it out. This is my content script:
let element = window.getSelection().anchorNode;
let finder = element.getAttribute('id');
alert(finder.toString()); //test
This is my event page:
chrome.contextMenus.create({ id: "M", title: "Feature One", contexts: ["selection"] });
chrome.contextMenus.create({ id: "ATCB", title: "Feature Two", contexts: ["selection"] });
chrome.contextMenus.onClicked.addListener(function(clickData){
if (clickData.menuItemId == "M" && clickData.selectionText){
//var one = clickData.selectionText;
chrome.tabs.executeScript({
file: 'contentScript.js'
});
}
if (clickData.menuItemId == "ATCB" && clickData.selectionText){
var two = clickData.selectionText;
alert(two + " two"); //test
}
});
And this is my manifest file:
{
"manifest_version": 2,
"name": "Menu",
"version": "1.0",
"icons": {
"128": "icon.png",
"48": "icon.png",
"16": "icon.png"
},
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}],
"permissions": [
"contextMenus",
"tabs",
"activeTab",
"file://*/*",
"https://*/*",
"http://*/*"
]
}
Thank you for reading my question
This can be accomplished with document.activeElement.id;
https://www.w3schools.com/jsref/prop_document_activeelement.asp
I am developing a chrome extension. I want to redirect to a custom html page when new tab is created.
This is process.js file.
chrome.tabs.onCreated.addListener(function() {
alert("hello");
window.open('https://ucsc.cmb.ac.lk/', '_self', false);
});
This is manifest.json file.
{
"manifest_version": 2,
"name": "xxx",
"version": "1.0",
"description": "xxx",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["process.js"],
"presistent": true
},
"permissions": [
"storage",
"notifications",
"contextMenus",
"tabs",
"activeTab",
"http://*/",
"https://*/"
]
}
alert is working. but it is not loading the page.
You are probably looking for Override Pages.
Add this code to your manifest file:
"chrome_url_overrides" : {
"pageToOverride": "myPage.html"
},
You can try this:
window.open('https://ucsc.cmb.ac.lk/', '_blank', false);
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).