{"id":18016929,"url":"https://github.com/fitzgen/canvas-tool","last_synced_at":"2025-04-04T15:32:58.850Z","repository":{"id":66008019,"uuid":"16895612","full_name":"fitzgen/canvas-tool","owner":"fitzgen","description":"experimental canvas tool; WORK IN PROGRESS","archived":false,"fork":false,"pushed_at":"2014-02-16T22:22:11.000Z","size":168,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-17T11:59:38.846Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fitzgen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-16T22:21:36.000Z","updated_at":"2015-04-19T16:58:57.000Z","dependencies_parsed_at":"2023-02-19T21:15:39.334Z","dependency_job_id":null,"html_url":"https://github.com/fitzgen/canvas-tool","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitzgen%2Fcanvas-tool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitzgen%2Fcanvas-tool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitzgen%2Fcanvas-tool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitzgen%2Fcanvas-tool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fitzgen","download_url":"https://codeload.github.com/fitzgen/canvas-tool/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247202651,"owners_count":20900823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-30T04:19:42.511Z","updated_at":"2025-04-04T15:32:58.819Z","avatar_url":"https://github.com/fitzgen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Restartless-Template\n===\n\nSimple template project for developing restartless Firefox Developer Tools addons.\n\n![Screenshot](https://dl.dropboxusercontent.com/u/2388316/screenshots/firefox-restartless-addon.png)\n\n## Workflow\n\nThis template allows you to create restartless Firefox add-ons. This means that your workflow can also benefit from it, and reduce the (likely annoying) code-\u003ebuild-\u003einstall lag. See documentation about [setting up a bootstrapped addon extension environment](https://developer.mozilla.org/docs/Setting_up_extension_development_environment#Firefox_extension_proxy_file) for some in-depth explanation on how to do this.\n\ntl;dr: A \"Firefox extension proxy file\" is a simple way of telling Firefox where an add-on is located, via an absolute path. Whenever you change the contents of the add-on, simply re-enabling it will update it; no need to tediously drag-and-drop-install it anymore.\n\n### How to iterate fast\n\n#### The quick and easy version\n\nThis will probably work in most unix-like shell environments, like in OS X and Linux:\n```bash\ngit clone https://github.com/victorporof/Restartless-Template.git\ncd Restartless-Template\n./configure -i \"your-addon-id\" -n \"YourAddonName\" -d \"Your addon description\" -a \"Your name\" -P \"default\"\n```\n\n__Caveats__: Temporarily, until [issue #3](https://github.com/victorporof/Restartless-Template/issues/3) is fixed:\n* `./configure` can only be used *once* after cloning the repo;\n* `-i` and `-n` *must not* contain spaces, and only use alphanumeric characters.\n\nThat's it :) Now, after you change something in the add-on, simply re-enable it for it to update automatically. You can do this from the [about:addons](about:addons) page in Firefox: click the \"Disable\", then the \"Enable\" button for your add-on.\n\n#### The detailed version\n\n__Step 0__. Clone this repository.\n\n__Step 1__. It's a good idea to customize your add-on's id and name *now*, before things get too complex. By default, this template has a vanilla `my-addon` id and `MyAddon` name. You should modify this using `./configure`.\n\n* `./configure -i awesome-addon-id` to set the id; this will be useful when creating an extension proxy file.\n* `./configure -n AwesomeTool` to set the name; this will be displayed in the Toolbox and various Firefox menus.\n\nInitially, please try to only use alphanumeric characters for the add-on's id and name.\n\nOptionally, you can also specify the add-on's author, version, description etc.:\n\n* `./configure -v 1.0` to set the version; this is useful for tracking bugs and letting your users know which add-on version they're using.\n* `./configure -d \"An awesome description\"` to set the description; this will be shown on [addons.mozilla.org](https://addons.mozilla.org/developers/) when publishing your add-on.\n* `./configure -a \"Your name\"` to set the autor's name; this will be, as well, shown on [addons.mozilla.org](https://addons.mozilla.org/developers/).\n\n__Step 2__. Locate your Firefox profile directory. Read [this](http://kb.mozillazine.org/Profile_folder_-_Firefox) for more information. It's usually in these folders:\n\n* OS X: `~/Library/Application Support/Firefox/Profiles/\u003cprofile folder\u003e`\n* Linux: `~/.mozilla/firefox/\u003cprofile folder\u003e`\n* Windows: `%APPDATA%\\Mozilla\\Firefox\\Profiles\\\u003cprofile folder\u003e`\n\nOptionally, you might want to create a new Firefox profile used just for the development of your add-on. This will prevent unexpectedly and accidentally altering your main profile if you make mistakes during the development process. Read more about how to do this [here](https://developer.mozilla.org/Add-ons/Setting_up_extension_development_environment#Development_profile).\n\n__Step 3__. Create a file in the \"extensions\" directory under your profile directory with the extension's ID as the file name. If there's no \"extensions\" folder, create it. The extension's ID is in the [install.rdf](https://github.com/victorporof/Restartless-Template/blob/master/install.rdf#L9) file.\n\nFor example, with this vanilla template, the extension proxy file name would be `my-addon@mozilla.com`.\n\n__Step 4__. Set the (plain text) contents of this file to be the path to the directory that contains [install.rdf](https://github.com/victorporof/Restartless-Template/blob/master/install.rdf) (where you cloned this repository).\n\nFor example, the extension proxy file's contents could be `~/home/myself/work/Restartless-Template`.\n\n__Step 5__. Restart Firefox. A dialog asking you whether \"you would like to modify Firefox with the add-on\" might show up; please allow the installation and continue.\n\nOpen Firefox Developer Tools using Ctrl/Cmd+Shift+I and you'll see your new addon in the Toolbox.\n\n## Theming\n\nStarting with Firefox 29, the developer tools can be \"light\" or \"dark\" themed, based on a user preference in the Options panel of the Toolbox. To make your add-on look good regardless of the theme, you should use the `.theme-dark` and `.theme-light` selectors, as exemplified in [skin/style.css](https://github.com/victorporof/Restartless-Template/blob/master/skin/style.css).\n\n```css\n.theme-dark #my-node {\n  color: #f5f7fa;\n}\n.theme-light #my-node {\n  color: #ed2655;\n}\n```\n\nTake a look at [this wiki](https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors) for the recommended pallete used by default throughout the Firefox developer tools. Try using those colors for a consistent look and feel.\n\n## Making the add-on work for remote targets\n\nThe Firefox Developer Tools have support for remote debugging. The protocol is described in depth [here](https://wiki.mozilla.org/Remote_Debugging_Protocol) and the remote procedures are described [here](https://developer.mozilla.org/en-US/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging). If you want to make your add-on work with remote debugging, you'll have to support remote targets and [allow the add-on to use them](https://github.com/victorporof/Restartless-Template/blob/master/bootstrap.js#L59).\n\nCertain tools in Firefox will always use remote targets, so, for example, your add-on won't show up in the [App Manager](https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager) if remote targets are not supported.\n\nTake a look at [firefox-client](https://github.com/harthur/firefox-client) repo for an example use of the remote debugging API.\n\n## Releasing\n\nSimply `make` inside the project folder to build and archive the latest version of the add-on. A build directory will be created, containing an .xpi file representing your add-on. Subsequent calls to `make` will update the add-on file with the latest changes.\n\nTo wipe the build directory, use `make clean`.\n\nIf you use git tags to nicely version your project, you can use `make xpi` to build a \"release\" version of your add-on based on the latest tag. This will not take uncommitted changes into consideration.\n\n## Publish your add-on\n\nGo to https://addons.mozilla.org/developers/ and publish your new awesome add-on.\n\n## Read more\n\nThere's some (under development) documentation about the [Developer Tools API](https://developer.mozilla.org/docs/Tools/DevToolsAPI). If you need help, please ask around on irc.mozilla.org, in #devtools.\n\nThank you. Have fun!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffitzgen%2Fcanvas-tool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffitzgen%2Fcanvas-tool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffitzgen%2Fcanvas-tool/lists"}