Submit form from content script of a Chrome extension - html

I am creating an extension that fills a form and submits it. The extension is able to fill the form inputs but gives the following error when triggers the submit event on the form.
Form submission canceled because the form is not connected
I am doing this from a content script using the following code.
var form = $('<Query selector for form>');
form.submit();
Following are the manifest file contents:
{
"name": "My Extenssion",
"description": "My extension description",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": [
"tabs", "background", "*://*/*", "http://*/*", "https://*/*", "storage", "activeTab", "scripting"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [ "jquery-3.6.0.min.js", "aes.js", "content.js" ]
}
],
}

Related

Chrome extension manifest permissions migrating from V2 to V3

Am looking to migrate a manifest V2 extension to V3, but concerned extension might be disabled due to change in manifest permissions. My original plan was to create a new beta extension with existing V2 code and perms, install it from the chrome store locally, then update to manifest V3 perms and see what happens, but chrome store no longer accepts new V2 extensions.
Either the official documentation is purposely vague on the matter of permissions, or I missed something. Other SO questions I see are very specific. Hoping someone with more experience sees this and might be able to spot right away if anything may trigger with the manifest upgrade below. Ideally it's a smooth process given were already requesting a broad match on one of the content script blocks, and the permission list is also reduced.
Current manifest V2 (non pertinent values redacted)
{
"manifest_version": 2,
"name": "...",
"short_name": "...",
"description": "...",
"version": "1.8.0",
"background": {
"page": "background.html"
},
"content_scripts": [
{
"matches": ["*://*.example.com/*",
"*://example2.co/*",
"*://*.example2.com/*",
"http://www.example3.com/*", "https://www.example3.com/*"],
"css": [],
"js": ["js/content_script1.min.js"],
"run_at":"document_end"
},
{
"matches": ["http://*/*", "https://*/*"],
"exclude_matches": [
"*://example2.co/*",
"*://*.example2.com/*",
"*://*.example3.com/*"
],
"css": [],
"js": ["js/content_script2.min.js"]
}
],
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "popup.html",
"default_title": "..."
},
"permissions": [
"activeTab",
"background",
"storage",
"tabs",
"notifications",
"http://*/",
"https://*/"
],
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://static.example.com https://api.example.com https://plugin.example.com https://example.com https://s3.us-west-2.amazonaws.com; object-src 'self'",
"externally_connectable": {
"matches": ["*://example.com/*"]
},
"icons": { ... },
"web_accessible_resources": ["/*.png", "/*.svg"]
}
New manifest V3
{
"manifest_version": 3,
"name": "...",
"version": "2.0.0",
"description": "...",
"minimum_chrome_version": "93",
"permissions": [
"storage",
"alarms"
],
"host_permissions": [
"*://*/*"
],
"web_accessible_resources": [
{
"resources": [
"/assets/*"
],
"matches": [
"*://*/*"
]
},
{
"resources": [
"chunks/*-*.js",
"ui/content-script/index.js"
],
"matches": [
"https://*/*",
"http://*/*",
"*://*/*"
]
}
],
"action": {
"default_title": "...",
"default_popup": "ui/popup/index.html",
"default_icon": { ... }
},
"icons": { ... },
"background": {
"service_worker": "service-worker.js",
"type": "module"
},
"content_scripts": [
{
"js": [
"ui/content-script/import-index.js"
],
"matches": [
"https://*/*",
"http://*/*"
],
"run_at": "document_end"
}
],
"externally_connectable": {
"matches": [
"*://example.com/*"
]
}
}

Is it possible to create a chrome extension showing an overlay div without adding it to the DOM?

I am trying to create a simple chrome extension and at the moment I am injecting my scripts and stylesheets to the DOM to show an overlay div in the browser window. However when I change the tab or address the div won't appear until document is ready.
So is there a way to show an overlay div on all tabs without adding it to the DOM?
My manifest file:
{
"name": "My extension",
"description": "test",
"version": "0.0.1",
"manifest_version": 2,
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": [
"css/content.css",
],
"js": [
"libs/jquery-3.2.1.min.js",
"js/content.js"
]
}
],
"browser_action": {
"default_popup": "popup.html",
"default_title": "My extension"
},
"permissions": [,
"https://www.example.com/*", // I will update the div content from this URL
"storage"
],
"web_accessible_resources": [
"fonts/*.*"
]
}
I am adding it from my content.js like:
$('body').prepend(div);

background.js is being triggered every refresh

It seems as if my background.js is triggered every refresh [planted an alert, and i see it every refresh, also my context menu is duplicating its inner self].
this is my manifest file:
"manifest_version": 2,
"name": "test",
"description": "test",
"version": "1.0",
"permissions": [
"activeTab",
"storage",
"tabs",
"contextMenus",
"https://*/*",
"http://*/*",
"https://www.google.com/_/chrome/newtab*"
],
"browser_action": {
"default_icon": "raj_robot.png",
"default_title" : "MemoMi"
},
"chrome_url_overrides" : {
"newtab" : "mypage.html"
},
"background": {
"scripts" : ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js" : ["selection.js"],
"run_at": "document_end"
}
],
And this is my background script:
function handle_click() {
alert("hi there!");
}
chrome.contextMenus.create({
title: "menu title",
contexts:["selection"],
onclick: handle_click
});
what am I doing wrong here?
Thanks!
Gura
Ok, I found it. I was actually implicitly triggering background.js by using methods in the content scripts, that should have been in the background.js. Just comment out your code and and see if it improves.

Chrome extension access webrequest headers

I'm trying to write simple extension that would act on request headers.
In documentation there is something about chrome.WebRequest, but I have no idea how to make it work....
When I put listener to content page, chrome.WebRequest is undefined, when I put it to background section, totally nothing happens...
manifest
{
"manifest_version": 2,
"name": "RequestSpy",
"version": "0.1",
"description": "HTTP/S Request Analizer",
"background": [
{
"scripts": ["scripts.js"]
}
],
"icons":{
"128":"spy.png"
},
"permissions": [
"*://*/*","webRequest"
]
}
script.js
alert('haha');
chrome.webRequest.onHeadersReceived.addListener(function(details){
console.log(details);
alert('huhu');
});
Any help?
manifest.json
{
"name": "OnRequest",
"version": "1.0",
"description": "I can't has cheezburger!",
"permissions": ["webRequest",
"webRequestBlocking",
"http://*/*",
"https://*/*"],
"background": {
"scripts": ["background.js"]
},
"manifest_version": 2
}
background.js
chrome.webRequest.onHeadersReceived.addListener(function(e){
alert("onHeadersReceived");},{urls: ["http://*/*", "https://*/*"]}, ["blocking"]
);

Make Google Chrome Extension Always apply to Site X

I have created a small extension that applies a simple css file to a website.
Currently though, it applies to ALL websites, and only applies when I click the icon for my extension.
I need it to always apply to one particular site
I think it's something up with my manifest.json:
{
"manifest_version": 2,
"name": "UI",
"description": "UI alter",
"version": "1.0",
"permissions": [
"tabs",
"activeTab",
"http://thewebsite.com"
],
"background": {
"scripts": ["override.js"],
"persistent": true
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "change ui"
}
}
You need to use a content script instead, and use a matches parameter in your manifest:
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
See Doc