Place button on wiki Page.
I got a task, that to add a cody in wiktionary side. For do this we have knowledge of Wiki Gadget.
Create an Account on wiki page:
- If we want to change in wiki page. First we want to create account in wiki.
- Then we create a own javascript page for make change.
- The changes can be seen in our page only.
- If we want to change globally, i have a knowledge of Gadget_kitchen in wiki.
Find the place that have to change
- Go to wiktionary site and seach any word it.
- open F12 to view inspect and find the place heading usi.
- I found in
- body -> div(mw-page-container) -> div(mw-page-container-inner) -> div(mw-content-container) ->main -> header.
- header contains nav, h1, div(title-shortlink-container), div(vector-dropdown.
- h1 must be copy and button place near to h1 or div(title-shortlink-container).

Create common.js page and paste the code
- After create account on Wiktionary.
- Type this url :https://en.wiktionary.org/wiki/User:UserName/common.js.
- Re-place the UserName with your userName.
- Paste the below code on the editor.
Code:
const observer = new MutationObserver(() => { const heading = document.querySelector(".title-shortlink-container"); if (heading) { // Create the button element const button = document.createElement("button"); button.textContent = "Copy Text"; button.style.marginLeft = "10px"; // Add some spacing from the container // Insert the button next to the .title-shortlink-container heading.insertAdjacentElement("afterend", button); // Add an event listener to copy the text button.addEventListener("click", () => { const textToCopy = heading.textContent.trim(); // Get only the container's text navigator.clipboard.writeText(textToCopy).then(() => { alert("Text copied: " + textToCopy); }).catch(err => { console.error("Failed to copy text: ", err); }); }); observer.disconnect(); // Stop observing once the element is found } }); // Observe the document for dynamic changes observer.observe(document.body, { childList: true, subtree: true });
Code Explanation :
- Use Document. querySelector for get the element of the .title-shortlink-container class. This class is for shortURL className and assign to variable Heading.
- If the Heading is not null. Then we create the button and styles.
- The Button is placed next to link. Use heading.insertAdjacentElement(βafterendβ, button);
- Button action create a function in addEventListener.
- Get the link by heading.textContent and store in textToCopy
- For copy the text use navigator.clipboard.writeText(textToCopy)
- Then pop alert for the event.
- if error catch throw error message.
Problem faced (dynamically loaded content)
- First i use DOMContentLoaded. It cannot work in wiki.
- Then i use Polling (Setintervel for a Certain time). It works partcially.
- Then i use MutationObserver. I works perfectly to all pages.
Reference:
https://ta.wikipedia.org/wiki/Special:MyPage/common.js
https://stackoverflow.com/questions/24344022/how-to-use-mutationobserver
https://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript