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 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 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);
	});


})();