I am coding a Web Extension. It opens up as a popup when clicked that user can interact with. Popup displays HTML and CSS correctly, but fails to execute JS.
Here the code of my manifest.json file:
{
"manifest_version": 2,
"name": "To-Do List",
"description": "Keep track of your tasks easily.",
"version": "1.0.0",
"icons": {"128":"icon.png"},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["*://*/"],
"js": ["app.js"]
}
],
"permissions": ["activeTab"]
}
All the files are in same directory!
Related
I am trying to create a chrome extension, that will redirect to custom html file. the page is blocked by the browser
manifest.json
{
"manifest_version": 3,
"name": "Hello World!",
"version": "0.1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["src/blocker.js"]
}
],
"permissions": ["storage", "activeTab", "tabs"],
"action": {
"default_popup": "src/html/popup.html"
}
}
blocker.js
window.location.href = chrome.runtime.getURL("html/popup.html");
Page blocked Image
Either add blocked.html to web_accessible_resources in manifest.json or switch to using declarativeRequest API
On click inside the extension
Fetch id"dfa5" text data and alert
I am looking for when someone clicks inside the extension button, then fetch h1 id"" data. and alert
manifest.json
{
"manifest_version": 2,
"name": "Sample Name",
"version": "0.1.0",
"description": "This is a sample description",
"short_name": "Short Sample Name",
"permissions": ["activeTab","tabs", "declarativeContent", "storage", "<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["background.css"],
"js": ["background.js"]
}
],
"browser_action": {
"default_title": "Does a thing when you do a thing",
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"32": "icons/icon32.png"
}
}
}
background.js
document.addEventListener("DOMContentLoaded", () => {
var button = document.getElementById("asdfjk")
button.addEventListener("click", () => {
sdef();
})
})
function sdef() {
var ksdfh = document.getElementById("dfa5").innerHTML; // current website page h1 id="dfa5"
alert(ksdfh)
}
I'm writing a Chrome plugin for my needs. I'd like to be able to select HTML elements like Adblock Plus do to be able to watch changes on the element and its children. I use MutationObserver in my content.js.
How can I to make it work the way I want? I'd like to trigger it from the popup menu. I see there's this API: chrome.devtools.inspectedWindow, probably I can make use of it somehow?
manifest.json
{
"manifest_version": 2,
"name": "PageFontStyle",
"version": "1.0",
"description": "Changes font style on page",
"devtools_page": "devtools.html",
"icons": {
"128":"icon128.png",
"48":"icon48.png",
"16":"icon16.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html",
"default_title": "Page Font Style"
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-3.3.1.min.js", "content.js"],
"css": ["content.css"]
}
],
"permissions": [
"tabs",
"activeTab"
]
}
I'm using the example here as a starting point for accessing some DOM elements on the user's current tab. In popup.html, I have the following:
<script type="text/javascript" src="popup.js"></script>
And the first lines of popup.js are:
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log("test");
console.log('Turning ' + tab.url + ' red!');
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="red"'
});
});
Manifest.json has the following permissions:
{
"manifest_version": 2,
"name": "",
"version": "1.0",
"description": "",
"icons": { "16": "icon16.jpg",
"48": "icon48.jpg",
"128": "icon128.jpg" },
"minimum_chrome_version": "46",
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.min.js", "getDescription.js"],
"run_at": "document_start"
}],
"options_page": "options.html",
"permissions": ["<all_urls>", "tabs","storage", "activeTab"]
}
Nothing is appearing in console, as if function isn't firing at all.
As it mention here onClicked fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
If you want to have the popup and then to execute a script when the icon is clicked use below approach.
{
"name": "My Extension",
"version": "0.1",
"manifest_version" : 2,
"description": "la lala laa",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
Inside the background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "popup.js"});
});
Or it should work fine if you have below in your popup.html
<script src="popup.js"></script>
Inside your popup.js
window.onload = function() {
console.log("do whatever you want here !!!")
}
I want to create my first Firefox-Addon so I am really inexperienced.
I want to create an Addon, to modify the YouTube-Website.
background.js
function editVideo() {
document.getElementsByTagName("video")[0].playbackRate = 2;
document.getElementById("movie_player").stopVideo();
document.getElementById("movie_player").setPlaybackQuality('hd720');
document.getElementById("movie_player").playVideo();
}
browser.browserAction.onClicked.addListener(editVideo);
manifest.json
{
"description": "YouTube-Test",
"manifest_version": 2,
"name": "YouTube-Test",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": {
"48": "icons/logo_48.png",
"64": "icons/logo_64.png"
}
}
}
So if I click the Button, the Playbackrate should be 2 and the quality 720p.
But nothing happens! If I type thoose commands directly into the console, it works.
I always get this error:
document.getElementsByTagName(...)[0] is undefined
or:
document.getElementById(...) is null
I would appreciate your help.
{
"description": "YouTube-Test",
"manifest_version": 2,
"name": "YouTube-Test",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["https://www.youtube.com/*"],
"js": ["runsOnWebPage.js"],
"run_at": "document_idle"
}
],
"browser_action": {
"default_icon": {
"48": "icons/logo_48.png",
"64": "icons/logo_64.png"
}
}
}
The js file within the content_scripts should now run on youtube, you might want to add more "matches" since this one only covers that specific link, and youtube has like 1000 different links