Chrome Extension packing while developing - any better way? - javascript

I do some chrome extension (web music play/stop) as a hobby project.
At the moment my process is like this:
Disable chrome store version
Make changes
Pack extension
Remove previous version of extension
Drag'n'drop new dev version
When I think I'm done, I upload the final zip to the dashboard, remove dev version and turn back on the chrome store version.
So this looks quite hard and not rational. Guess there is another way to do it.
Maybe I've just missed a good part of the manual, please point me to.

Answer by #devnull69
You even don't need to disable the chrome store version because the
local / unpacked version will have a different extension id and can
easily be run in parallel to the webstore version
https://developer.chrome.com/extensions/getstarted#unpacked

Related

How to save changes to modifications of external site JS Code

I have recently been trying to mess around with JS code of different websites to explore the programming language further. I have been able to successfully modify the scripts of the websites but I cannot find a way to save the changes and they do not take effect. I am using the newer Microsoft Edge (Version 92.0.878.0 (Official build) dev (64-bit)).
It shows that "changes to this file were not saved to the system", how do I go about this?
(please note: this website is external and I have tried downloading the HTML and modifying it but then the site does not function)
This is the default behavior if you don't add the files to workspace. If you want to save the changes to file system, you need to use Filesystem-> Workspace.
You can refer to Edit files with Workspaces about the detailed steps of using Workspace. After Step 1: Set up, you can directly go to Step 4: Save a JavaScript change to disk.
Besides, there's another workaround to test the changed js code without saving to file system. You can refer to this answer about how to achieve this.
Windows file system is preventing chrome from saving file with special chars. Chrome is using filenames to match files on your local version with ones on the webpage.
Because of windows replacing special chars ("?") With escaped ones ("%3"), chrome is unable to match them and shows that error.
I don't know the perfect solution for that, but one of the workarounds would be to remove cache canceling string with question mark. Very nasty bug of local overrides.

How do I enable copy to clipboard in Firefox on Linux?

I released a new version of a firefox webextension, Copy
All Tabs last night. The code is open source and available on github.
The new version fixes many bugs and is overall more stable. It works as expected on Windows and Mac (Firefox 61).
However, when I was testing on Linux (both Firefox 60 and 61), the "Copy Tabs" function fails.
https://www.google.com/search?q=Component+returned+failure+code&ie=utf-8&oe=utf-8&client=firefox-b-1-ab
Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE)
The function that fails on Linux is located in this file:
https://github.com/charlesbrandt/copy_all_tabs/blob/master/ff-web_extension/background.js
The major shift was moving the copy and paste functions from a content script that was injected into the active tab's page to the background.js file. The content script approach was failing for Firefox specific pages (e.g. about:debugging) for security reasons.
Given the discrepancy, I'm inclined to think it has something to do with Firefox, but if it's a problem in the webextension I'd be happy to fix it.
If this is a bug in firefox, what is the best way to report it?
Alternatively, does anyone have a suggestion for how modify the extension so that it works effectively on all platforms?
Update:
I followed #Dexter's advice and filed a bug in Bugzilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=1473780
Since that time, the plugin eventually started working in newer versions of the browser.
I do NOT know if this might be your issue, but here goes.
Recently switched from Windows to Pop! OS (derived from Ubuntu/GNOME). Had problems with certain Firefox Browser Extensions, specifically those enabling the copying of links from webpages and subsequent pasting them into, say, GVim.
UNTIL I followed the instructions here:
How to Customize the GNOME Shell in Ubuntu Using Extensions
https://www.makeuseof.com/tag/customize-gnome-shell-extensions/
WRT installing GNOME Tweak, GNOME Shell Extensions, and Shell Extensions for Firefox.
I would suggest you try this and see if it helps. I hope it does.

Errors in Firefox Add-on SDK when using cfx xpi whereas cfx run works great

I'm a student at a University Institute of Technology in France and I'm very new to Firefox add-on development since I discovered it at the beginning of my work placement, a few days ago.
What I have to do is an add-on that allows employees of the company to organize SCRUM-meetings (it deals with agile software development).
For the moment, what I've done looks like this :
http://img11.hostingpics.net/pics/716589MeetingConfigurationPanel.png
The panel allows users to configure the settings of the meeting. I have also added a toolbar with action buttons and a frame in it, so that the meeting can start/be interrupted on the action buttons Onclick event. I have implemented countdown timers for each participants. There is also a "Next Speaker Button" that resets one of the timers when clicked...
And all seems to work fine when I use cfx run, but when I package the extension using cfx xpi... there are errors.
See : http://img11.hostingpics.net/thumbs/mini_585083outputExpected.png
EDIT : Problem with the link. I will update it as soon as possible.
Here is what I have in cfx run mode. All the buttons I declared in the code, along with the frame, are correctly displayed in the toolbar.
But in cfx xpi mode, some of the buttons are apparently "stuck" in what Browser Console refers to as "inner-toolbar" or something like that as I can read when I remove the extension.
That made me wonder if the buttons really were in the toolbar. And they were, according to the Debugger. So I've started thinking that my problem was compatibility with Firefox but I've checked both Firefox version and the em:maxVersion attribute in the install.rdf file that can be found when unpacking the xpi/zip file, and I've change the values so that they match, but it didn't resolve my problem.
I've read as many things as possible on topics related to the problem I'm now facing (including StackOverflow questions) but I have not been able to find a proper way to fix it up to now. Is my problem really different ? I have no idea. I might have done something bad trying to change things as they were intended to, I suppose. But it's unlikely.
And the thing is that I really need to make this add-on works, because it is the only thing I will work on during my work placement.
The solution to my problem may be very simple. Maybe I did something really stupid. I don't know. The only thing I know for sure is that I want to find what's going on, so that I will be able to deliver the first version as soon as possible.
Feel free to ask for more informations if necessary.
Thanks for reading.
Julien B.
(Not technically an answer but SO won't let me comment.) You could try cfx run, then uninstalling the addon from the FF session it opened, then installing the xpi in that same session by doing a file open of the xpi (which will install it). Have a feeling it will run in that case, which means there is a difference between your standard Firefox and the one cfx run opens. There is a difference of course, because cfx run doesn't install all your other add-ons. But it may be running a different Firefox version as well. I mention this because when I run cfx run it always opens the beta version of FF which I downloaded at some point, and I don't know where its picking it up from.

What is the easiest way to develop Firefox extension?

I'm planning to develop a simple Firefox extension that will shorten URL of a currently active tab, display a popup with the shortened URL, and place it into the clipboard.
In Google Chrome, this would be pretty easy (according to http://developer.chrome.com/extensions/getstarted.html) -- pure JavaScript plus a few calls to JavaScript API-s of interacting with the browser's UI.
However, after searching around for a good Firefox extensions tutorial, the most officially-looking links I found are:
https://developer.mozilla.org/en-US/docs/Extensions
https://developer.mozilla.org/en-US/docs/Building_an_Extension
How do I write a Firefox Addon?
According to them, it looks like I will have to learn the XUL language for even the simplest interactions with the browser's UI. On top of that, I will have to set up custom Firefox profile so as not to hose my default profile during development, create complicated directory structure, write manifest in obscure XML, figure out how to package and test whatever I implement, etc.
It's 2013, isn't there an easier way of building Firefox extensions?
It's 2013, isn't there an easier way of building Firefox extensions?
Yes there is!
The links you provided in the question are unbelievably outdated. There is a new, much better way of developing Firefox extensions -- Firefox Add-on SDK.
However it's pretty hard to stumble upon it by just googling along the lines of 'firefox addon tutorial'. I'm amazed Mozilla doesn't advertise it more aggressively, or at least mention it on those pages you found.
Steps to get started (Mac/Linux, but should be pretty similar for PC):
Download the SDK from https://addons.mozilla.org/en-US/developers/builder, unpack it.
Quickly glance over the README file (always useful).
Execute source bin/activate from the SDK dir (the same dir the README file is in).
Execute cfx docs -- this bootstraps local copy of SDK docs and opens it in your browser.
Leave the SDK dir, create an empty dir for your extension.
Execute cfx init inside the extensions dir -- this generates all the necessary files/directories.
Follow the rest of getting-started-with-cfx page:
Update lib/main.js with just a few lines of JS to place a custom widget onto add-on bar.
Execute cfx run -- this opens fresh Firefox instance with your new shiny extension in it.
All in all, it took me just a few hours to read the documentation, get familiar with the SDK API-s, find SDK module to place a widget onto a navigation bar instead of add-on bar, and develop fully-functional extension in just about 50 lines of JavaScript.
HTH!
Update
There is a new standard, called WebExtensions
From MDN
There are currently several toolsets for developing Firefox add-ons, but WebExtensions will become the standard by the end of 2017.
If you are writing a new add-on, we recommend that you write a WebExtension.
As of https://blog.mozilla.org/addons/2016/11/23/add-ons-in-2017/, the only way going forward will be to use WebExtensions. The last SDK extensions will be accepted for Firefox 52, while Firefox 57 will end all other extension support, supporting only WebExtensions.
Firefox copied Google Chrome's extension API. So you could just use your Chrome extension and see if all the APIs are already supported in Firefox (they should be as of now).
Programmers such as NoScript's Giorgio Maone actively support the change to WebExtensions.
To develop a WebExtension, you need
either the web-ext-tool that can be installed via
npm install --global web-ext
or simply use Firefox's about:debugging or Chromium's chrome:extensions to temporarily load the webextension.
Either way, you need a manifest.json file in a directory created by you, which glues all functionality together. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension for a first example. Or the Google docs at https://developer.chrome.com/getstarted.
Yes there are three different techniques you can use to build extensions:
Add-on SDK-based extensions
manually bootstrapped restartless extensions
overlay extensions
You can read comparison between here
If you can, it's advisable to use the Add-on SDK, which uses the
restartless extension mechanism but simplifies certain tasks and
cleans up after itself. If the Add-on SDK isn't sufficient for your
needs, implement a manual restartless extension instead.
Steps to get started with Add-on SDK-based extensions
Installation
Installation on OS X, FreeBSD, Linux
Installation on OS X using Homebrew
Installation on Windows
Create user interfaces
Interact with the browser
There are two official ways for developing add-ons, each of them has pros and cons:
1- WebExtensions (newer method):
WebExtensions are the future of Firefox add-ons. If you can use the WebExtensions API, it's the best choice. You can develop and publish WebExtensions right now, but they're still in an early state.
2- Add-on SDK (older method):
The Add-on SDK provides APIs for developing Firefox add-ons, and a tool for developing, testing, and packaging them.
I made a tutorial on developing extensions using the Firefox addon SDK:
How to develop a Firefox extension with the addon SDK

Detecting Firefox extension version

I have a Firefox Extension that I would like to populate the About box with the version within install.rdf.
I know that FUEL's extIExtension allows one to see the version for an extension but I did not create the extension using FUEL (and the docs on MDC seem very light on how to transition to it). Is there a way to dynamically check the extension version?
I specifically do not want to hard code or make it generated from my Makefile
#sdwilsh, you're right, my apologizes.
Took me awhile to realize the only FUEL object I have access to is fuelApplication, but it looks like this does it:
let version = Application.extensions.get('extension#id').version;
FUEL is just an API, so it doesn't matter how you implemented your add-on.

Categories

Resources