I'll try to delete a localStorage Item in JS with my Chrome/Firefox extension, but it seems like it won't work, and now I would like to know how can I debug this problem, here my code from my popup.js:
var btn = document.createElement("BUTTON");
btn.innerText = "Delete matchs";
btn.onclick = function () {
localStorage.removeItem('save_to_storage');
};
my popup.html:
<!DOCTYPE html>
<html lang="de">
<head>
<script src='popup.js' defer></script>
</head>
<body>
<div id='button'></div>
</body>
</html>
my manifest.json:
{
"name": "TEST",
"version": "2021.07.31",
"manifest_version": 2,
"description": "Test",
"author": "lucki1000",
"browser_action": {
"default_icon": "favicon.ico",
"default_popup": "popup.html"
},
"content_script":[
{
"js": ["popup.js"]
}
],
"permissions": ["tabs", "<all_urls>", "storage", "activeTab"]
}
If I press the button Delete matchs the save_to_storage item still appears in my developer tools, but if i type directly into the console localStorage.removeItem('save_to_storage'); it works as expected.
I test it in firefox and chromium.
I also tried to get the value of this item by using alert(localStorage.getItem('save_to_storage')); instead of localStorage.removeItem('save_to_storage'); in my popup.js but this alert was empty.
Can it be that my popup.js can't access this item? and if yes how can I solve this?
Test Enviroment:
Chromium Version 92.0.4515.107 (Offical Build) Arch Linux (64-Bit)
Mozilla Firefox 90.0.2 (64-Bit) for Arch Linux
Regards
Lucki1000
Related
I have made a chrome Extension But I am unable to do what I am suppose to do there!
The Function is not working! It is working accuratley through Console log but I want to run this through a chrome Extension.
Here is the Little Idea:
Issue: I donot know how Manifest V3 Scripting Tag Work If you could Personally Solve this for me I will be very Great Full.
Problem:
I want my javascript Program to run when I will click the button. Everything is ready but I think the problem is in Manifest.Json File.
Linkedin Extension That will help in selecting all the member on the page for an invite
Here is the HTML CODE
<!DOCTYPE html>
Linkedin Select All Chrome Extension
<img id="logo" src="Logo.svg" alt="Linkedin-Logo">
<h1 id="main-text"><b>Invite Your Connections to Like your Page</b></h1>
<h1 id="main-description">Follow 3 Main Steps:</h1>
<img src="SVG.svg" alt="Road-Map">
<button id="btn" class="btn-primary">Select All</button>
Javascript Code
var listener_element = document.getElementById("btn");
listener_element.addEventListener("click", () => {
var x = document.getElementsByClassName("ember-checkbox ember-view");
// To Get Element of All
for (i = 0; i < x.length; i++) {
x[i].click()
}
});
Manifest Json Code
{
"name": "Linkedin New",
"description": "This extension will help you stay motivated while you work.",
"version": "1.0.0",
"manifest_version": 3,
"action": {
"default_popup": "doc.html",
"default_icon": "Icons.svg"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"script.js"
]
}
]
}
Hi There, Please Help me to solve this code
I've been looking everywhere for an answer to what seems like a simple problem but can't find anything that works. Making a chrome extension and all I want it to do right now is display how many DOM items are listed on the current page.
masnifest.json:
{
"manifest_version": 3,
"name": "Tag Manager",
"description": "",
"version": "1.0",
"permissions": ["scripting",
"tabs",
"notifications"],
"host_permissions": ["https://*/*"],
"action": {
"default_popup": "popup.html"
}
}
popup.html:
<html>
<head>
<title></title>
</head>
<body>
<script src='popup.js'></script>
</body>
</html>
popup.js:
function hello() {
var name = document.getElementsByClassName('wd-tag-row').length;
alert("Tags " +name);
}
hello();
When I run the popup.js script from the developer console on the page I'm testing it works. An alert pops up that says "Tags: 9" but whenever I run the extension it says "Tags: 0" and I can't figure out why.
Any help would be appreciated, thank you!
Tried moving around where the script is called on, and tried making it run when the page is finished loading.
I am writing a chrome extension and am trying to bind an event listener to an HTML button via an external JS file.
The event listener works, however Chrome throws the following error:
This is manifest.json, background.js, and popup.html file in that order:
{
"name": "DRIP",
"version": "1.0",
"manifest_version": 2,
"description": "DRIP is an automation tool for purchasing limted items",
"permissions": ["storage", "tabs"],
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
}
}
function myAlert(){
alert('hello world')
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('alertButton').addEventListener('click', myAlert);
});
__
<html>
<head>
<title>Test</title>
</head>
<body>
<form name='testForm'>
<input type='button' id='alertButton' value='click me'>
</form>
<script language='javascript' src='background.js' defer></script>
</body>
I'm sorry if my formatting isn't great. Input is greatly appreciated!
Remove
"background": {
"scripts": ["background.js"]
}
That's for running tasks in the background and loads a background page. It is running on a blank page _generated_background_page.html (that it generated for you). Note that you can set the background page's html if you needed to.
Popup is a separate background page with the html set to the default_popup value. That is the page you get when you click the icon and get a popup.
Official docs for reference: https://developer.chrome.com/extensions/background_pages
Can I interact with elements of the specific Chrome Extension (e.g. click on a button of the extension) in JS script of my frontend?
This extension shows a button when clicked on, you get to your profile (Activity tab).
To use this extension you have to be on this site (StackOverflow) but not when you are in Activity tab (otherwise you'll not see the effect).
Your steps (more here):
save all files
go to chrome://extensions
switch browser to Developer mode
click LOAD UNPACKED
manifest.json
{
"manifest_version": 2,
"name": "Click",
"description": "Simple extension",
"version": "1.0.0",
"permissions": ["tabs", "<all_urls>"],
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
}
}
popup.html
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<button id="btn-click">Go to profile</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
function injectTheScript() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
});
}
document.getElementById('btn-click').addEventListener('click', injectTheScript);
content_script.js
function clickProfileLink() {
var stackOverflowProfile = document.getElementsByClassName("my-profile")[0];
stackOverflowProfile.click();
}
clickProfileLink();
Helpful links
Examples from Google
Good tutorial for beginners
What am I doing wrong? I want to run a function when clicking "Show me some foo".
manifest.json browser_action
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/popup.js"></script>
</head>
<body>
<div class="changes">
<span class="reset">Show me some foo
</span>
</div>
</body>
</html>
popup.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{file:"reset.js"});
});
reset.js
var el = document.getElementById('foo');
el.onclick = showFoo;
function showFoo() {
alert('I am foo!');
return false;
}
Full manifest.json file
{
"name": "App name",
"version": "1.0.2",
"manifest_version": 2,
"description": "Desc.",
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": "img/icon.png"
},
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["js/myscript.js"],
"exclude_matches":[
"http://site.com/*"
]
}
],
"web_accessible_resources": [
"chrome_ex_oauth.html"
]
}
I'm not sure what you are trying to do, but I'll explain your code to you:
user clicks a browserAction
popup window is crated and scripts from popup.html are loaded
popup.js loads and registers a listener chrome.browserAction.onClicked.addListener
user closes a popup window (by clicking anywhere outside it or on the browserAction again)
pupup.html page is unloaded
chrome.browserAction.onClicked.addListener listener is unregistered
As you can see reset.js is never loaded as it's never injected. What's more, you can't have a popup.html and chrome.browserAction.onClicked.addListener in the same extension ("This event will not fire if the browser action has a popup." source).
You probably want to put chrome.browserAction.onClicked.addListener into the background page so that reset.js is injected to current page whenever browserAction is clicked. And, as I mentioned above, for chrome.browserAction.onClicked.addListener to fire, you need to get rid of "default_popup": "popup.html" from manifest.
If you wanted to inject a script to popup.html - it doesn't make much sense. You have full control over popup.html and you can simply put reset.js in the <head>.