Handy Switcher TYPO3/BE/FE/Env (a.k.a. Magic server teleporter for TYPO3 & other webprojects) wolo.pl '.' studio 2017-2021 wolo.wolski(at)gmail.com http://wolo.pl/ https://chrome.google.com/webstore/detail/typo3-backend-frontend-ha/ohemimdlihjdeacgbccdkafckackmcmn https://github.com/w010/chrome-typo3-switcher ** 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.</p> - 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 <base> 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 <base href="[url]"> is set in <head>, 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 ** FAQ: Q: I have a multi-domain site. And when I'm in Backend I use switch to get to Frontend. Why am I getting an error "ID was outside the domain"? A: You probably have selected a page in the tree which is in a root that uses different domain than current domain in url used for getting the Backend. You must select a page within the root that contains current domain or disable the "Open current pagetree selected page" in extension options. Q: Couldn't it detect proper domain for selected page? A: No. It's impossible to retrieve such information from Backend using Chrome's extension. In multi-domain sites better just use the built-in backend View button. Q: I'm on some page id in Frontend, and when I use the button to open Backend, I'm getting the "About modules" screen. Could it detect that page id and expand the tree for me? A: It would be great, I'm experimenting with some js tricks to achieve that, but not yet ready. But the backend hardlinks are coming in 11.x and it should be possible there (I didn't check if it's already implemented or we have to wait for final/LTS).<br> - But for older versions - AFAIK it's not possible to make Backend preselect a page in tree from any external call. So it needs some hacks and tricks to manipulate backend's js and force it to do something from the outside.<br> It would be of course possible using dedicated TYPO3 extension, but I really, really don't wanna relate any functionality from adding custom code in the projects. It have to be independent and work everywhere. Q: Why there's suddenly a "project-name" submenu in icon context menu, and my envs goes there, instead to be in top-level? A: This is because of Chrome's stupid limit of items (6) in this menu - and you've added more. So to show them all, they must go into submenu - submenus doesn't have limits, but are less comfortable. So consider reducing number of env contexts and/or links. Sorry - blame Google. Q: Why this extension needs access to all tab urls I browse? Does this thing spy my browse history?! A: No, this extension doesn't do anything with the urls it reads. All it does it's comparing current url with your configured context urls to find if it's there to show other contexts in a menu. Permission to read the urls is essential here, it's the one and only way to make this whole idea work. It doesn't read any cookies, session, or user data. If you don't believe me, you can always check it by yourself reading the source code. If you are paranoid and still don't trust, just uninstall it. ** Changelog: v2.2.0 3.06.2021 - options: project repo gui basically ready - now tests & tuning - options: general refresh & tune for readability - fix: firefox svg favicon preview, chrome -> ff unify v2.1.0 17.04.2021 Important change: - permissions: instead of global access to all hosts now it handles permission per domain<br> (this change was necessary, because of WebStore's strict policy, with global * permission it's now very hard to publish the ext there) v2.0.0 3.03.2021 Main changes & news: - env/options: feature "Add/Edit current uri" added to menu (submenu Tools). It speeds up projects configuration, jumps right where you need - env: pagetree selection when switching to FE rebuild/fix + it now works in 10.x - env: major fix & rebuild of project init code (locks & event handling). now detecting and setup project should be more stable (and show badges and favicons where needed - resolves the disappearing badge problem in 98% cases) - env: major menu generating and handling rebuild. + now All Projects shows also on rmb context menu - options/env: removed options "Show Install tool" & "DUMP", these checks are now replaced by text inputs, allows to set two own links or shortcuts in action menu (why two? Chrome's menu items limit.) - options: tune overall look / better readability / jumpmenu / open links / fancy checkboxes... - options: Dark Mode option added (thanks to Paweł Schwałkowski) More: - options: projects - search/filter added - options: projects - autosort option added - options: mark conflicted uuid projects (like when importing project with uuid that already exist) also mark freshly imported items - options: modals slightly reworked - options: basics of projects repo functionality (wip / hidden for now) - options: added possibility to flush given item from storage (dev mode) - options: lots of other improvements v1.0.0 28.04.2020 Changes & news: - env: page favicon color overlay finally works (beta feature, still testing) - major underhood change - projects are now stored in separated Chrome Storage items (due to single item size limit in Chrome) - but should migrate transparently - options: favicon overlay configuration + preview, badge preview - options: import / export to file, download json config of single project - options: import projects from other extensions (let me know if you need import for some specific) - options: notification when quota exceeded on save (you must have many, many projects for this to be a problem, but if, blame Chrome stupid limitations) - env: jump to Install tool, DUMP dir now can also be shown in menu (hidden by default) - this will be replaced with custom input label + url in the future Fixes & tune: - env: optional All projects / all instances url & related links, now can be there always, not only when project no match - env: url schema is now ignored when matching - env: context menu layout tuned for better readability - env: display badge also on pages from project Links - env: contexts & links without url are now ignored - env: stop reloading badge on every tab refocus and on other unnecessary events - env: better action icon gfx - options: export now items always up to date when edited, no need to reload - options: css & tmpl tune, panels and order slightly reorganized - options: autosave reworked, now saves on almost every change (only on sorting it does not. I'm still not sure if it should) v0.9.999 16.04.2018 - bugfix: options panel was not usable because of scroll problem in latest chrome, switched back to open in tab - bugfix: right click context menu items was not displaying when clicked on links etc. now displays on everything v0.9.998 4.09.2017 - bugfix (options: fix drag & drop) v0.9.997 2.09.2017 - options: projects /contexts /links now has drag & drop order setup (includes jquery ui with Sortable component) - env: action icon active-indicator when tab is set to project - env: default env PRODUCTION renamed to LIVE - env: fix - detect project also when on one of its links - env: fix - action menu separator: hide when no links - env: fix - badge setup console info: hide when debug disabled - env: fix - env switch: valid url path v0.9.996 21.06.2017 - bugfix (env: current tab setup) v0.9.995 12.06.2017 - new features! (which can be disabled, if you want only fe/be jumping) - project environments switching (configuration + context menu) - display badge with env info (+ options) - import / export of project settings - ext type had to be changed to "background" (I tried to make bg scripts as light as possible) - contextMenus permission now required - jquery 3.2.1 added (included only in options screen) v0.9.3 27.05.2017 - configuration options added, thus main code slightly reworked - storage permission now required - new icons v0.9.2 21.05.2017 - switch to frontend function now opens currently selected page in backend page tree v0.9.1 14.05.2017 - prevent wrong url if base href is set to "auto" or "/" - new description, button title, readme added v0.9 6.05.2017 - ext changed to type "event" - added switch to frontend functionality - name changed v0.1-0.8 6.05.2017 - initial - <base> retrieve test, basic functionality ** 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/
w010/chrome-typo3-switcher
[CHROME/FIREFOX] [TYPO3] - WebBrowser extension: BE/FE/Env - Backend-Frontend Handy Switcher (Magic Server Teleporter) - productivity tool for web integrators and devs. Mainly TYPO3-dedicated, but most of the functionality is universal.
JavaScript