Switches between Frontend / Backend and work environments on your TYPO3 projects. Preserves page path and base url.

Latest Version

Version
2.2.597
Update
June 12, 2024
Size
169KiB
Developer
wolo.pl
Category
Users
101
Rating
5 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
Storage
ContextMenus
See more

TYPO3 - BE/FE/Env Handy Switcher Extension

https://github.com/w010/chrome-typo3-switcher

> PLEASE TAKE A LOOK INTO MY GITHUB AND HELP MIGRATE TO MANIFEST3, OR IT WILL SOON STOP WORKING <


**
What's that (and for who)?

It's a productivity everyday time saver / navigation helper for (mainly) TYPO3 web projects, originally dedicated to TYPO3
CMS integrators / devs / editors / project managers.
Especially recommended for those who works with a large number of projects that runs multiple instances / continuous integrated etc.
- But it's a great work improvement for everyone who works with TYPO3 on everyday basis.
(I've got feedback that non-TYPO3 people also finds some of its elements very usable - so in future the \"/typo3\" segment will be
configurable, making the ext system-independent and universal)

In short words, simple yet advanced - it can drastically simplify everyday navigating through your projects instances / their backends /
trackers / repos / whatsoever. Forget searching for bookmarks, which usually throws you to homepage anyway, forget clicking
again and again through some sub-sub-menus looking for that one subpage on stage that you just edited on dev, or copy-pasting paths
from domain to domain every time...
Have all instances within a click, teleporting from one to another in a second, always landing exactly where you wanted.
+ With minimum effort and easy config exchange it helps to keep full url sets always up to date for all team members. (More coming soon)




**
So what does it do?

- One basic function is the toolbar button which opens TYPO3 Backend of current site (base href-based), or returns
to Frontend, if already there. But it offers much more than that.


- Magic starts when you work with many projects that runs on multiple staging environments and frequently jump between them.
Go to the options and start using Projects configurations - create or import from your teammates.
Name the new project and set all urls for environments / contexts / servers. Now you can quick jump between them keeping path (go straight
to the very same subpage).
It shows color badge and favicon overlay on each one to visually distinguish and always have a good overview where you are
(and avoid mistakes like messing on the wrong one - set red for public servers and you never miss that again).
You can also add some project-related links (like issue tracker, wiki, repo etc) to show in project's context menu.


- Projects can be easy exported/imported in json format (all or separately) to share with your team / post to wiki / etc.
More advanced functions wip, comes in next big release!


- Switching to Frontend tries to use current pagetree-selected page id and open it instead of just base url (similar to
\"View webpage\" button in backend, but works even if you're in a module without page tree or such button).
(you can turn off this behaviour) [note, it doesn't respect multidomains - probably impossible to implement easy]
(tested in versions 6.2 - 10.4)


- If you rather go simply, you may turn off all that fancy environment-related functions, and use only BE/FE switch button to keep lightweight.
(but why give up all these great features?)
Note, that this ext doesn't load any js libs in its background instance (only some in options panel) so it doesn't eat too much memory.


- Also, I'd like to make it expand the pagetree and select current page, best will be based on url, when switching to backend.
It would be a huge productivity boost.
This will probably work in TYPO3 11 once it lands, which will introduce backend direct links. But current TYPO3 architecture doesn't allow such trick.
(I'm experimenting with some js hacks & workarounds to make it work in <= 10.x, but no success yet)



Security Trust:
See FAQ



**
Story:

There was that Chrome ext for opening backend, some time ago (\"Fast TYPO3 CMS Backend switch\"), but it only opened current domain + /typo3/ segment - I've used it
for a long time though. Thanks to the author of it, Patrick Lischka, for inspirations to improve this idea.



- My ext goes much further and it can open back the Frontend from Backend, also it can not only add a path to a domain, but
tries to fetch the tag from source, then uses it for a backend url build (or just a domain, if not found).
So it works as expected when running project in a subdirectory, ie. on your dev environment. (even though that approach is not recommended
and usually leads to misc problems with some extensions - like buggy ajax in formhandler - many people works that way
and I needed to handle that to avoid everyday frustration)
(For this to work, it needs that is set in , so if you rather use absRefPrefix, I have no idea, how to help you)

Please write me any problems, suggestions or ideas and feel free to report issues on Github.
https://github.com/w010/chrome-typo3-switcher/issues





wolo '.' studio
2017-2024




**
Legal:


TYPO3 and its logo are trademarks of the TYPO3 Association.
http://typo3.org/about/the-trademarks/


**
Icons based on:
https://github.com/TYPO3/TYPO3.Icons
https://typo3.org/about/the-brand/style-guide/the-typo3-logo/
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "author": "wolo.pl '.' studio", "homepage_url": "http://wolostudio.free.nf/handyswitcher/", "name": "TYPO3 - BE/FE/Env Handy Switcher", "short_name": "TYPO3 Switcher", "description": "Switches between Frontend / Backend and work environments on your TYPO3 projects. Preserves page path and base url.", "version": "2.2.597", "browser_action": { "default_icon": "Icons/icon-48.png", "default_title": "TYPO3 - switch Backend-Frontend (right click: Environment switch)" }, "icons": { "16": "Icons/icon-16.png", "32": "Icons/icon-32.png", "48": "Icons/icon-48.png", "128": "Icons/icon-128.png" }, "background": { "page": "background.html" }, "options_ui": { "page": "options.html", "chrome_style": true, "open_in_tab": true }, "permissions": [ "activeTab", "storage", "contextMenus" ], "optional_permissions": [ "*://*/*", "tabs" ]}
Read more

How to download and manually install TYPO3 - BE/FE/Env Handy Switcher extension for Chrome

Looking for a way to install TYPO3 - BE/FE/Env Handy Switcher extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install TYPO3 - BE/FE/Env Handy Switcher extensions manually, this article outlines two simple methods to effortlessly install TYPO3 - BE/FE/Env Handy Switcher extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download TYPO3 - BE/FE/Env Handy Switcher extension and manually install through Drag &Drop

If you ever need to manually install a TYPO3 - BE/FE/Env Handy Switcher extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the TYPO3 - BE/FE/Env Handy Switcher Extension by clicking the "Download CRX" button on the website.

Look for the TYPO3 - BE/FE/Env Handy Switcher extension you wish to install. Go to the website and download the TYPO3 - BE/FE/Env Handy Switcher extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for TYPO3 - BE/FE/Env Handy Switcher extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the TYPO3 - BE/FE/Env Handy Switcher extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download TYPO3 - BE/FE/Env Handy Switcher extension for Chrome and install in Developer Mode

This is another method to install TYPO3 - BE/FE/Env Handy Switcher extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the TYPO3 - BE/FE/Env Handy Switcher extension file

Select and download the TYPO3 - BE/FE/Env Handy Switcher extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the TYPO3 - BE/FE/Env Handy Switcher extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your TYPO3 - BE/FE/Env Handy Switcher extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the TYPO3 - BE/FE/Env Handy Switcher extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install TYPO3 - BE/FE/Env Handy Switcher extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

TYPO3 Keyboard Control Extension · Productivity 101 0 ★ 384KiB

icon

Fast TYPO3 CMS Backend switch Extension · Developer Tools 101 6 ★ 20.6KiB

icon

TYPO3 Review Extension · Productivity 101 0 ★ 125KiB

icon

Bar Charts for Hacker News Polls Extension · Productivity 101 2 ★ 43.72KiB

icon

Local Memory Project Extension · Productivity 101 0 ★ 1.38MiB

icon

NativeExt Extension · Developer Tools 101 0 ★ 89.41KiB

icon

Hacker News Duplicate Detector Extension · Accessibility 101 1 ★ 21.7KiB

icon

Github Code Outline Extension · Productivity 101 1 ★ 464KiB

icon

TYPO3 - Little Helper Extension · Developer Tools 101 8 ★ 330KiB

icon

ownsheet Extension · Developer Tools 101 2 ★ 225KiB

icon

Asset injector Google Chrome extension Extension · Developer Tools 101 1 ★ 7.77KiB

icon

Taboverflow Extension · Productivity 101 10 ★ 11.81MiB

icon

Snap Environment Switcher Extension · Developer Tools 101 16 ★ 208KiB

icon

metaTaber Extension · Developer Tools 101 0 ★ 150KiB

icon

SuperChromePass Extension · Productivity 101 3 ★ 91.02KiB

icon

Giphub Extension · Fun 101 6 ★ 145KiB

icon

rappidjs-devtools Extension · Developer Tools 101 0 ★ 9.41KiB

icon

The-M-Project Inspector Extension · Developer Tools 101 4 ★ 12.79KiB

icon

OctoLenses Extension · Developer Tools 101 3 ★ 3.74MiB

icon

Atma.js DevTool Extension · Developer Tools 101 0 ★ 201KiB

icon

Environment switcher 2.0 Extension · Developer Tools 101 4 ★ 271KiB

icon

Prototype - Inject new code in your websites Extension · Developer Tools 101 1 ★ 144KiB

icon

console.sparkline Extension · Developer Tools 101 1 ★ 4.7KiB

icon

Lavaca Developer Tools Extension · Developer Tools 101 0 ★ 10.42MiB

User reviews

icon

Pawel Schwałkowski (ID: 00000077da22e8e7) Voted 5 ★ - Updated 12/18/2019 It speed up my work. And provide good utility.

icon

Daniel Bogusz (ID: 0000001a9d7acf5b) Voted 5 ★ - Updated 02/22/2019 Quite useful when you use it to the full.