I wanted to try learning how to make a browser extension and tried doing the first official tutorial https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
When following everything here and going into a mozilla.org domain the extension does not put a red border around the site. It basically does nothing. (I know that content scripts are disabled on addon.mozilla.org)
I've carefully followed each step of the tutorial.
Here's the repository for the tutorial : https://github.com/mdn/webextensions-examples/tree/master/borderify
I just want to verify if I'm the only one with who this tutorial does not work.
The tutorial is fine. You can try changing it to another site and test again. For example:
{
"description": "Adds a solid red border to all webpages matching mozilla.org. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#borderify",
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/borderify",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.example.com/*"],
"js": ["borderify.js"]
}
]
}
Then go to https://example.com/ to test.
I had the same problem: the Borderify example was not working. In my case, it was a problem of my default browser's privacy settings.
Try going to Firefox settings and see if the option Always use private mode is disabled.
Alternatively, after loading the extension in debugging mode, go to the Add-Ons section and enable the extension for private windows.
Related
I am creating Google Workspace Editor add-on for Docs and Slides. My add-on is rejected by Google Workspace Marketplace team with message No homepage card is provided for the host app: Google Slides/Docs
According to documentation the homepage card is optional, therefore I initially did not implement it as my addon has no sense outside to document or slide.
https://developers.google.com/apps-script/add-ons/editors/gsao/building-editor-interfaces?hl=en#accessing_the_add-on_ui
Now I am trying to add it in appscript.json:
{
"addOns": {
"common": {
"homepageTrigger": { "enabled": true, "runFunction": "onHomepage" },
...
}
And my onHomepage trigger is not called when I run the add-on functions or install it.
Please advise on where the homepage is displayed in Docs/Slides and how to test this function.
I've created an extension with the following manifest to add a search engine to Firefox.
{
"manifest_version": 2,
"name": "Google Browse by Name search engine",
"description": "Adds a search engine that searches Google using its Browse by Name feature",
"version": "1.0",
"applications": {
"gecko": {
"strict_min_version": "55.0"
}
},
"chrome_settings_overrides": {
"search_provider": {
"name": "Browse by Name",
"search_url": "https://www.google.com/search?sourceid=navclient&gfns=1&q={searchTerms}",
"keyword": "bbn",
"favicon_url": "https://www.google.com/favicon.ico",
"is_default": false
}
}
}
This works as expected on Firefox desktop, adding an option to the list of enabled search engines. However, it does not appear to work on Firefox Android, I assume because chrome_settings_overrides is not supported on Android.
Addons making use of the legacy API appear to work correctly (e.g. Startpage), adding search engines to the Android browser, but since Firefox is dropping support for legacy (non webextension) extensions this is no longer a solution.
What is the correct way to add a search engine to Firefox for Android using an addon?
I am aware that users can add a search engine available on a webpage by long-pressing on its search field, but I would like to offer an extension to automatically install the search engine (and save users from having to find a page offering the correct search field).
I've been using Fluid App (OS X) in the past to create standalone desktop apps of specific web apps I want separated from the browser, have their own dock icon, and not have any of the regular browser fluff (toolbar, address bar, etc.). Fluid app, though, has been neglected for a long time and certain newer web apps (e.g. Inbox from Google) completely fail to load in it.
So I'm looking for a simple way to create a desktop app that will have a single window loading a single website, and I think that NW.js would be ideal for that.
What should be the configuration process for building such a simple desktop app for just a webview for a given URL, using NW.js?
If you simply want to open a single webpage in a NW.js program, it is exceptionally easy.
First make sure you read: https://github.com/nwjs/nw.js/wiki/How-to-run-apps
Especially the MacOS section.
Make a directory your_project/
create a file in your_project/package.json
Then configure package.json:
{
"main": "https://github.com",
"name": "github app",
"description": "Github demo app",
"version": "0.1.0",
"keywords": [ "demo", "node-webkit" ],
"nodejs": false,
"window": {
"title": "Github",
"icon": "logo.png",
"toolbar": false,
"frame": true,
"width": 1024,
"height": 768,
"position": "mouse",
"min_width": 400,
"min_height": 200
},
"webkit": {
"plugin": true
}
}
You can run nwjs from the nwjs.app/Contents/MacOS/nwjs path_to_your_project
Note the "nodejs": false option this disables the nodeapi for the application, if you end up needing nodejs in part of your application make sure what whatever webview you use had nodejs disabled as this is a major security flaw, do your research - do it right.
Also note that nothing is preventing the user to access content from other domains in the above example.
You will eventually want to look at packaging your application, which is also quite simple: https://github.com/nwjs/nw.js/wiki/how-to-package-and-distribute-your-apps
General Questions
Hello! I'm delving into the world of Chrome Extensions and am having some problems getting the overall workflow down. It seems that Google has recently switched to heavily advocating Event Pages instead of keeping everything in background.js and background.html. I take part of this to mean that we should pass off most of your extension logic to a content script.
In Google's Event Page primer, they have the content script listed in the manifest.json file. But in their event page example extension, it is brought in via this code block in background.js: chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });
What are the advantages of doing it one way over the other?
My Code
I'm going forward with the programatic way of injecting the content script, like Google's example.
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "Let's get this sucker working",
"version": "0.0.0.1",
"permissions": [
"tabs",
"*://*/*"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "icon.png"
}
}
background.js
chrome.browserAction.onClicked.addListener(function() {
console.log("alert from background.js");
chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
console.log("jquery Loaded");
});
chrome.tabs.executeScript({file: "content.js"}, function() {
console.log("content loaded");
});
});
content.js
console.log('you\'r in the world of content.js');
var ans = {};
ans.createSidebar = function() {
return {
init: function(){
alert("why hello there");
}
}
}();
ans.createSidebar.init();
I am able to get the first 3 console.log statements to show up in the background page's debugger. I'm also able to get the alert from content.js to show up in any website. But I'm not able to see the console.log from content.js, nor am I able to view any of the JS from content.js. I've tried looking in the "content scripts" section of the background page debugger's Sources tab. A few other posts on SO have suggested adding debugger; statements to get it to show, but I'm not having any luck with anything. The closest solution I've seen is this post, but is done by listing the content script in the manifest.
Any help would be appreciated. Thanks!
Content scripts' console.log messages are shown in the web page's console instead of the background page's inspector.
Adding debugger; works if the Developer Tool (for the web page where your content script is injected) is opened.
Therefore, in this case, you should first activate the Developer Tool (of the web page) before clicking the browser action icon and everything should work just fine.
I tried to use the debuggermethod, but it doesn't not work well because the project is using require.js to bundle javascript files.
If you are also using require.js for chrome extension development, you can try adding something like this to the code base, AND change eval(xhr.responseText) to eval(xhr.responseText + "\n//# sourceURL=" + url);. (like this question)
Then you can see the source file in your dev tool (but not the background html window)
manifest v3
You can add console.log statements to your content scripts.
This is one of the best ways to debug an application.
Let's say you want to access a DOM node from the content script.
const node = document.querySelector("selector")
node will be Element instance if it exists else it will be null
If you can see the node in the Elements tab but not able to access it via content script then the node might have not been loaded at the time you accessed it.
Follow this answer to fix this issue.
This my seem childish but I have not found anything with any search in this forum - a very basic thing.
I have no experience with the Chrome environment or webkit - mine is with IE. but here goes...
Following along with the getting started tutorials - is fine - got to Finnur's using debug video link and ran into a confusing problem. He states that to inspect items not currently active with an unpackaged extension that is loaded - you enter chrome-extensions://[extension id]/options.html in the omnibar. The options.html file resides in the same folder as all other components dedicated to the extension. The problem: Every time I enter this info into the omnibar it brings up a web-search. through the preset default search engine. Cant seem to find a way to work offline or to turn off the search function.
So, I'm sure I am missing something very simple that all of your are very familiar with. I am using all the "getting started" files and a copy of the options.html found there. Options is grayed out in the drop-down menu of the extension but cant seem to load it.
MANIFEST.JSON
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"options_page": "options.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Very simple but cant seem to enter the options.html into the omnibar without having the search engine try to find it on the web and not in the folder.
The url should be chrome-extension://[extension id]/options.html not `chrome-extensions://[extension id]/options.html, notice theres no s at the end of extension in chrome-extension://.
Your manifest is a litlle malformed, the options_page shouldnt be in the browser_action field, try......
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
],
"options_page": "options.html"
}