Custom icon button not showing

[pat-s]

Hi, I've made the changes to index.js and started the app using electron .. However, the additional "icon" button is not showing up.

I've used the "local" and "CDN" approch. Any idea what might be the issue?

Thanks for this project!

[Juul1]

Installed the chrome extension in the Brave browser but the icon tab is not visible.

[jayhxmo]

@Juul1 I'm not sure about Brave browser, but there is currently an issue with icons not showing up in templates and full-width pages. Can you confirm if it works for normal / narrow pages?

[jayhxmo]

@pat-s Can you post your index.js from line 110 to 135?

[pat-s]

        });
        notionElm.addEventListener("dom-ready", function () {
            notionElm
                .getWebContents()
                .addListener("found-in-page", function (event, result) {
                var matches = result
                    ? { count: result.matches, index: result.activeMatchOrdinal }
                    : { count: 0, index: 0 };
                notionIpc.sendIndexToSearch(searchElm, "search:result", matches);
            });
            notionIpc.proxyAllMainToNotion(notionElm);
            let notionIconsGarbageCollector=[],notionIconsData=[],notionIconsWeb=!0;function throttle(e,t){let n;return function(){const o=arguments,i=this;n||(e.apply(i,o),n=!0,setTimeout(()=>n=!1,t))}}function getSync(e){let t=new XMLHttpRequest;return t.open("GET",e,!1),t.send(null),t.responseText}function getAsync(e,t){let n=new XMLHttpRequest;n.onreadystatechange=function(){4==n.readyState&&200==n.status&&t(n.responseText)},n.open("GET",e,!0),n.send(null)}function getTab(e,t){return document.querySelector(`div[style="display: flex; font-size: 14px; width: 100%; padding-left: 14px; padding-right: 14px; box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px; position: relative; z-index: 1;"] div:nth-child(${e}) ${t?"div":""}`)}function isCurrentTab(e){return getTab(e).childNodes.length>1}function getCurrentTab(){let e=document.querySelector('div[style="display: flex; font-size: 14px; width: 100%; padding-left: 14px; padding-right: 14px; box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px; position: relative; z-index: 1;"]');for(let t=1;t<e.childNodes.length;t++)if(e.childNodes[t].childNodes.length>1)return t}function changeIcon(e){document.querySelector("input[type=url]").focus();let t=document.querySelector("input[type=url]");Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value").set.call(t,e);var n=new Event("input",{bubbles:!0});t.dispatchEvent(n);const o=new KeyboardEvent("keydown",{bubbles:!0,cancelable:!0,keyCode:13});document.querySelector("input[type=url]").dispatchEvent(o);let i=document.querySelector('.notion-overlay-container .notion-scroller div[style="padding-top: 6px; padding-bottom: 6px;"] div[style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"] div');i&&simulateReactClick(i),removeIcons(),setTimeout(initializeIconTriggerListener,100)}function simulateReactClick(e){["mousedown","click","mouseup"].forEach(t=>e.dispatchEvent(new MouseEvent(t,{view:window,bubbles:!0,cancelable:!0,buttons:1})))}function resizeEmoji(){let e=document.querySelectorAll('div[style="cursor: pointer; user-select: none; transition: background 120ms ease-in 0s; display: flex; align-items: center; justify-content: center; border-radius: 3px; width: 32px; height: 32px; font-size: 24px;"]');for(let t=0;t<e.length;t++)e[t].style.width="33px",e[t].style.height="33px"}function resizeModal(){let e=document.querySelector('div[style="display: flex; flex-direction: column; width: 444px; min-width: 180px; max-width: calc(100vw - 24px); height: 356px; max-height: 70vh;"]');e&&(e.style.width="458px"),resizeEmoji()}function addIconsTab(){resizeModal();let e=document.querySelector('.notion-overlay-container div[style="position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh;"]');e&&overlayContainerObserver.disconnect(),e.attachEvent?(e.attachEvent("onclick",removeIcons),e.attachEvent("oncontextmenu",removeIcons)):(e.addEventListener("click",removeIcons,!1),e.addEventListener("contextmenu",removeIcons,!1));let t=getTab(3,!1).cloneNode(!0),n='style="display: flex; font-size: 14px; width: 100%; padding-left: 14px; padding-right: 14px; box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px; position: relative; z-index: 1;"',o=document.querySelector(`.notion-overlay-container div[${n}]`),i=document.querySelector(`.notion-overlay-container div[${n}] div[style="flex-grow: 1; display: flex; align-items: center; justify-content: flex-end; color: rgba(55, 53, 47, 0.6);"]`);t.childNodes[0].innerText="Icons";let r=o.insertBefore(t,i);r.childNodes[0].attachEvent?(r.childNodes[0].attachEvent("onclick",renderIconsTab),r.childNodes[0].attachEvent("mouseenter",handleIconsTabMouseEnter),r.childNodes[0].attachEvent("mouseleave",handleIconsTabMouseLeave),getTab(1,!0).attachEvent("onclick",removeIcons),getTab(2,!0).attachEvent("onclick",removeIcons),getTab(3,!0).attachEvent("onclick",removeIcons)):(r.childNodes[0].addEventListener("click",renderIconsTab,!1),r.childNodes[0].addEventListener("mouseenter",handleIconsTabMouseEnter,!1),r.childNodes[0].addEventListener("mouseleave",handleIconsTabMouseLeave,!1),getTab(1,!0).addEventListener("click",removeIcons,!1),getTab(2,!0).addEventListener("click",removeIcons,!1),getTab(3,!0).addEventListener("click",removeIcons,!1)),notionIconsGarbageCollector.push(getTab(1,!0)),notionIconsGarbageCollector.push(getTab(2,!0)),notionIconsGarbageCollector.push(getTab(3,!0));let a=document.querySelectorAll(`div[${n}] div[style="cursor: pointer; user-select: none; transition: background 120ms ease-in 0s; display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; height: 28px; border-radius: 3px; font-size: 14px; line-height: 1.2; min-width: 0px; padding-left: 8px; padding-right: 8px; color: rgba(55, 53, 47, 0.6);"]`);if(a.length){let e=a[a.length-1];e.attachEvent?e.attachEvent("onclick",removeIcons):e.addEventListener("click",removeIcons,!1),notionIconsGarbageCollector.push(e)}window.addEventListener("keydown",removeIconsOnEscape),notionIconsWeb?notionIconsData=JSON.parse(getSync("https://raw.githubusercontent.com/jayhxmo/notion-icons/master/icons.json")):getAsync("https://raw.githubusercontent.com/jayhxmo/notion-icons/master/icons.json",function(e){notionIconsData=JSON.parse(e)})}function renderIcon(e){return`<div class="notion-icons-icon" style="cursor: pointer; user-select: none; transition: background 120ms ease-in 0s; display: flex; align-items: center; justify-content: center; border-radius: 3px; width: 43px; height: 43px; padding: 4px;"><img style="width: 100%; height: 100%;" src="${e}"></div>`}function renderIconsTabSet(e,t,n,o,i){let r=`<div style="display: flex; padding-left: 14px; padding-right: 14px; margin-top: 6px; margin-bottom: 8px; color: rgba(55, 53, 47, 0.6); font-size: 11px; line-height: 120%; user-select: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 500;"><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${e+' by <a target="_blank" style="cursor: pointer; color: rgba(55, 53, 47, 1);" href="'+n+'">'+t+"</a>"}</div><div style="margin-left: auto;"><img class="loading-spinner" src="/images/loading-spinner.4dc19970.svg" style="visibility: hidden;"></div></div>`,a='<div style="display: flex; flex-wrap: wrap; align-items: flex-start; background: transparent; padding: 0px 12px 18px 12px; margin-bottom: 1px;">';for(let e=0;e<i;e++)a+=renderIcon(`https://raw.githubusercontent.com/jayhxmo/notion-icons/master/icons/${o}/${o}_${e}.png`);return r+(a+="</div>")}function renderIconsTab(){if(!isCurrentTab(4)){isCurrentTab(3)||simulateReactClick(getTab(3,!0));let e=document.createElement("div");e.id="notionIcons-activeBar",e.style.cssText="border-bottom: 3px solid rgb(55, 53, 47); position: absolute; bottom: -1px; left: 0px; right: 0px;";let t=getTab(3,!1).getBoundingClientRect().width,n=document.createElement("div");n.className="notionIcons-activeBarCover",n.style.cssText=`border-bottom: 2px solid rgba(255, 255, 255, 1); position: absolute; bottom: 0px; left: 0px; transform: translateX(-100%); right: 0px; width: ${t+1}px`;let o=document.createElement("div");o.className="notionIcons-activeBarCover",o.style.cssText=`border-bottom: 1px solid #ededec; position: absolute; bottom: -1px; left: 0px; transform: translateX(-100%); right: 0px; width: ${t+1}px`;let i=getTab(4,!1);i.style.position="relative",i.appendChild(e),i.appendChild(n),i.appendChild(o);document.querySelector(".notion-overlay-container .notion-scroller.vertical");let r="";if(notionIconsData&&notionIconsData.icons)for(let e=0;e<notionIconsData.icons.length;e++)r+=renderIconsTabSet(notionIconsData.icons[e].name,notionIconsData.icons[e].author,notionIconsData.icons[e].authorLink,notionIconsData.icons[e].source,notionIconsData.icons[e].size);let a=document.querySelector('.notion-overlay-container div[style="pointer-events: auto; position: relative; z-index: 0;"] div div[style="position: relative; top: 100%; pointer-events: auto;"] div').getBoundingClientRect(),c=document.querySelector('.notion-overlay-container div[style="display: flex; font-size: 14px; width: 100%; padding-left: 14px; padding-right: 14px; box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px; position: relative; z-index: 1;"]').getBoundingClientRect(),s=document.createElement("div");s.id="notionIcons",s.innerHTML+=`<div id="notion-icons" style="position: absolute; z-index: 9999999; top: ${a.y+c.height+1+"px"}; left: ${a.x+"px"}; width: ${a.width+"px"}; height: ${a.height-c.height-1+"px"}; overflow-x: hidden; overflow-y: scroll; background: #FFFFFF; background-color: #FFFFFF; border-radius: 3px; display: flex; flex-direction: column; padding-bottom: 8px; padding-top: 18px;"><div style="flex-grow: 1;">${r}</div></div>`,document.body.appendChild(s);let l=document.querySelectorAll(".notion-icons-icon");if(l[0].attachEvent)for(let e=0;e<l.length;e++)l[e].attachEvent("onclick",handleIconClick),l[e].attachEvent("mouseenter",handleIconMouseEnter),l[e].attachEvent("mouseleave",handleIconMouseLeave),notionIconsGarbageCollector.push(l[e]);else for(let e=0;e<l.length;e++)l[e].addEventListener("click",handleIconClick,!1),l[e].addEventListener("mouseenter",handleIconMouseEnter,!1),l[e].addEventListener("mouseleave",handleIconMouseLeave,!1),notionIconsGarbageCollector.push(l[e])}}function handleIconsTabMouseEnter(){getTab(4,!1).childNodes[0].style.background="rgba(55, 53, 47, 0.08)"}function handleIconsTabMouseLeave(){getTab(4,!1).childNodes[0].style.background=""}function handleIconClick(e){e.target.childNodes.length?changeIcon(e.target.childNodes[0].src):changeIcon(e.target.src)}function handleIconMouseEnter(e){e.target.style.background="rgba(55, 53, 47, 0.08)"}function handleIconMouseLeave(e){e.target.style.background=""}function removeIconsOnEscape(e){27==e.keyCode&&removeIcons()}function removeIcons(){let e=document.querySelector("#notionIcons"),t=document.querySelector("#notionIcons-activeBar"),n=document.querySelectorAll(".notionIcons-activeBarCover");if(e&&e.remove(),t&&(t.remove(),getTab(4,!1).style.position=""),n.length)for(let e=0;e<n.length;e++)n[e].remove();if(notionIconsGarbageCollector.length){for(let e=0;e<notionIconsGarbageCollector.length;e++)notionIconsGarbageCollector[e]=null;notionIconsGarbageCollector=[]}window.removeEventListener("keydown",removeIconsOnEscape)}let overlayContainer=document.querySelectorAll(".notion-overlay-container")[0];const overlayContainerObserver=new MutationObserver(function(e){e&&addIconsTab()}),overlayContainerConfig={attributes:!0,childList:!0,characterData:!0};function initializeIcons(){overlayContainerObserver.observe(overlayContainer,overlayContainerConfig)}let notionModalTrigger;function initializeIconTriggerListener(){let e='.notion-cursor-listener .notion-frame .notion-scroller div[style="padding-left: 96px; padding-right: 96px; max-width: 100%; margin-bottom: 0.5em; width: 900px;"] div',t=document.querySelector(`${e} div`),n=document.querySelector(`${e} img`);(notionModalTrigger=t||n).attachEvent?notionModalTrigger.attachEvent("onclick",initializeIcons):notionModalTrigger.addEventListener("click",initializeIcons,!1)}const notionFrameObserver=new MutationObserver(throttle(function(e){e&&location.pathname!=currentPath?(setTimeout(initializeIconTriggerListener,500),currentPath=location.pathname):e&&location.pathname==currentPath&&(notionModalTrigger&&document.body.contains(notionModalTrigger)||initializeIconTriggerListener())},200),notionFrameConfig={attributes:!0,childList:!0,characterData:!0,subtree:!0});function initializeNotionIcons(){setTimeout(function(){document.querySelector(".notion-frame")?(initializeIconTriggerListener(),notionFrameObserver.observe(document.querySelector(".notion-frame"),notionFrameConfig)):initializeNotionIcons()},250)}let currentPath="";document.body.onload=function(){currentPath=location.pathname,initializeNotionIcons()};
        });
        notionIpc.receiveIndexFromNotion.addListener(notionElm, "search:set-theme", function (theme) {
            notionIpc.sendIndexToSearch(searchElm, "search:set-theme", theme);
        });
        notionIpc.receiveIndexFromNotion.addListener(notionElm, "zoom", function (zoomFactor) {
            notionElm.getWebContents().setZoomFactor(zoomFactor);
            searchElm.getWebContents().setZoomFactor(zoomFactor);
            _this.setState({ zoomFactor: zoomFactor });
        });
        var electronWindow = electron.remote.getCurrentWindow();
        electronWindow.on("focus", function (e) {
            notionElm.focus();
        });
        window.setTimeout(function () {

[Juul1]

@Juul1 I'm not sure about Brave browser, but there is currently an issue with icons not showing up in templates and full-width pages. Can you confirm if it works for normal / narrow pages?

No still doesn't work.