AO3: Add button to Show Bookmark

Adds a "Show Bookmark" button before the "Edit Bookmark" button on the page where you view a work's bookmarks

目前為 2024-03-18 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name           AO3: Add button to Show Bookmark
// @namespace      https://github.com/w4tchdoge
// @version        1.0.1-20240318_143529
// @description    Adds a "Show Bookmark" button before the "Edit Bookmark" button on the page where you view a work's bookmarks
// @author         w4tchdoge
// @homepage       https://github.com/w4tchdoge/MISC-UserScripts
// @match          *://archiveofourown.org/*/bookmarks
// @license        AGPL-3.0-or-later
// @history        1.0.1 — Fix issue caused by data-remote attribute where bookmark could not be opened in the current tab
// @history        1.0.0 — Initial commit
// ==/UserScript==

(function () {
	`use strict`;

	// create empty array and fill it with the parent elements of the li element that makes up the native edit bookmark buttons
	var
		existing_edit_btns = [],
		existing_edit_btns = document.querySelectorAll(`*:has(> li > [id^="bookmark_form_trigger"])`);

	// proceed to iterate on each element in existing_edit_btns to make and insert a new show bookmark button
	existing_edit_btns.forEach(function (elm, i, arr) {
		// get the original li element which the link is a child of and make it a const so it cant be changed
		const orig = elm.querySelector(`li`);
		// clone orig to modify it and make the new show bookmark button element
		var li_elm = orig.cloneNode(true);
		// make a var specifically for the a element so i dont have to call a querySelector everytime
		var a_elm = li_elm.querySelector(`a`);

		// remove the data-remote as it prevents the bookmark from being opened in the current tab
		a_elm.removeAttribute(`data-remote`)

		// get the original a element id and change it for the new one
		var
			a_elm_id = a_elm.getAttribute(`id`).toString(),
			a_elm_id = a_elm_id.replace(`bookmark_form`, `show_bookmark`);

		// get the original a element href and change it for the new one
		var
			a_elm_link_href = a_elm.getAttribute(`href`).toString(),
			a_elm_link_href = a_elm_link_href.replace(`/edit`, ``);

		// get the original a element textContent and change it for the new one
		var
			a_elm_text = a_elm.textContent,
			a_elm_text = a_elm_text.replace(/edit/i, `Show`);

		// modify the cloned element using the a_elm_* variable to make the new show bookmark button
		a_elm.setAttribute(`id`, a_elm_id);
		a_elm.setAttribute(`href`, a_elm_link_href);
		a_elm.textContent = a_elm_text;

		// add the new show bookmark button before the edit bookmark button
		orig.before(li_elm);
	});


})();