add bookmarklet #127

New issue

Closed

opened 2025-10-14 16:17:45 -06:00 by navan · 0 comments

navan commented

2025-10-14 16:17:45 -06:00

Owner

Originally created by @zhouzi on 5/4/2017

This PR adds a bookmarklet as suggested in #1

You can try it out by right clicking in your browser's bookmarks bar, then click "add page" and paste the code below in the url field:

javascript:(function()%7B(function()%7B%22use%20strict%22%3Bfunction%20e(e)%7Breturn%20Array.prototype.slice.call(window.document.querySelectorAll(e))%7Dfunction%20t()%7Balert(%22Sorry%2C%20sakura%20styles%20could%20not%20be%20applied%20to%20this%20page.%22)%7Dfunction%20r()%7Bvar%20t%3De(%22link%22).filter(function(e)%7Breturn%22stylesheet%22%3D%3D%3De.getAttribute(%22rel%22)%26%26e!%3D%3Dn%7D)%2Cr%3De(%22style%22)%2Co%3Dt.concat(r)%3Bo.forEach(function(e)%7Be.parentElement.removeChild(e)%7D)%7Dvar%20n%3Dwindow.document.createElement(%22link%22)%3Bn.addEventListener(%22error%22%2Ct)%2Cn.addEventListener(%22load%22%2Cr)%2Cn.setAttribute(%22rel%22%2C%22stylesheet%22)%2Cn.setAttribute(%22href%22%2C%22https%3A%2F%2Funpkg.com%2Fsakura.css%2Fcss%2Fsakura.css%22)%2Cwindow.document.head.appendChild(n)%7D)()%3B%7D)()

You can then visit any site and click on the bookmark. It will do a few things:

Load sakura.css from the cdn
If it fails (due to the site's security policy for example) it alerts a message
If it succeeds, it will remove every stylesheets from the page along with <style> elements

The installation process is not ideal right now. You might not want to have the bookmarklet in master neither. It'd be better to have a gh-pages to host a GitHub page and add a button so users can drag and drop it in their bookmarks bar.

That been said, you could also add the button to the current demo page. It doesn't have to be in the repository as it may not change too much in the future. If you want to go the simpler route and do that, you just need to add this to the demo page:

<a href="javascript:(function()%7B(function()%7B%22use%20strict%22%3Bfunction%20e(e)%7Breturn%20Array.prototype.slice.call(window.document.querySelectorAll(e))%7Dfunction%20t()%7Balert(%22Sorry%2C%20sakura%20styles%20could%20not%20be%20applied%20to%20this%20page.%22)%7Dfunction%20r()%7Bvar%20t%3De(%22link%22).filter(function(e)%7Breturn%22stylesheet%22%3D%3D%3De.getAttribute(%22rel%22)%26%26e!%3D%3Dn%7D)%2Cr%3De(%22style%22)%2Co%3Dt.concat(r)%3Bo.forEach(function(e)%7Be.parentElement.removeChild(e)%7D)%7Dvar%20n%3Dwindow.document.createElement(%22link%22)%3Bn.addEventListener(%22error%22%2Ct)%2Cn.addEventListener(%22load%22%2Cr)%2Cn.setAttribute(%22rel%22%2C%22stylesheet%22)%2Cn.setAttribute(%22href%22%2C%22https%3A%2F%2Funpkg.com%2Fsakura.css%2Fcss%2Fsakura.css%22)%2Cwindow.document.head.appendChild(n)%7D)()%3B%7D)()">
  sakura
</a>

Ideally with a note such as Drag and drop this link into your browser's bookmarks bar. You will then be able to click on it to inject sakura styles in any sites.

*Originally created by @zhouzi on 5/4/2017* This PR adds a bookmarklet as suggested in #1 You can try it out by right clicking in your browser's bookmarks bar, then click "add page" and paste the code below in the url field: ```javascript javascript:(function()%7B(function()%7B%22use%20strict%22%3Bfunction%20e(e)%7Breturn%20Array.prototype.slice.call(window.document.querySelectorAll(e))%7Dfunction%20t()%7Balert(%22Sorry%2C%20sakura%20styles%20could%20not%20be%20applied%20to%20this%20page.%22)%7Dfunction%20r()%7Bvar%20t%3De(%22link%22).filter(function(e)%7Breturn%22stylesheet%22%3D%3D%3De.getAttribute(%22rel%22)%26%26e!%3D%3Dn%7D)%2Cr%3De(%22style%22)%2Co%3Dt.concat(r)%3Bo.forEach(function(e)%7Be.parentElement.removeChild(e)%7D)%7Dvar%20n%3Dwindow.document.createElement(%22link%22)%3Bn.addEventListener(%22error%22%2Ct)%2Cn.addEventListener(%22load%22%2Cr)%2Cn.setAttribute(%22rel%22%2C%22stylesheet%22)%2Cn.setAttribute(%22href%22%2C%22https%3A%2F%2Funpkg.com%2Fsakura.css%2Fcss%2Fsakura.css%22)%2Cwindow.document.head.appendChild(n)%7D)()%3B%7D)() ``` You can then visit any site and click on the bookmark. It will do a few things: 1. Load sakura.css from the cdn 2. If it fails (due to the site's security policy for example) it alerts a message 3. If it succeeds, it will remove every stylesheets from the page along with `<style>` elements The installation process is not ideal right now. You might not want to have the bookmarklet in master neither. It'd be better to have a `gh-pages` to host a GitHub page and add a button so users can drag and drop it in their bookmarks bar. That been said, you could also add the button to the current demo page. It doesn't have to be in the repository as it may not change too much in the future. If you want to go the simpler route and do that, you just need to add this to the demo page: ```html <a href="javascript:(function()%7B(function()%7B%22use%20strict%22%3Bfunction%20e(e)%7Breturn%20Array.prototype.slice.call(window.document.querySelectorAll(e))%7Dfunction%20t()%7Balert(%22Sorry%2C%20sakura%20styles%20could%20not%20be%20applied%20to%20this%20page.%22)%7Dfunction%20r()%7Bvar%20t%3De(%22link%22).filter(function(e)%7Breturn%22stylesheet%22%3D%3D%3De.getAttribute(%22rel%22)%26%26e!%3D%3Dn%7D)%2Cr%3De(%22style%22)%2Co%3Dt.concat(r)%3Bo.forEach(function(e)%7Be.parentElement.removeChild(e)%7D)%7Dvar%20n%3Dwindow.document.createElement(%22link%22)%3Bn.addEventListener(%22error%22%2Ct)%2Cn.addEventListener(%22load%22%2Cr)%2Cn.setAttribute(%22rel%22%2C%22stylesheet%22)%2Cn.setAttribute(%22href%22%2C%22https%3A%2F%2Funpkg.com%2Fsakura.css%2Fcss%2Fsakura.css%22)%2Cwindow.document.head.appendChild(n)%7D)()%3B%7D)()"> sakura </a> ``` Ideally with a note such as `Drag and drop this link into your browser's bookmarks bar. You will then be able to click on it to inject sakura styles in any sites.`

navan closed this issue

2025-10-14 16:17:46 -06:00

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: github/sakura#127

No description provided.

Rows
Columns