Icon select tool - Chrome Extension

[Inglan1]

V 1.0

If you want to add an icon (material) to Kodular, you have to go to an icon searching site, select the icon, copy the name, set font to Material, and paste the name.

That is why I developed this extension (chrome extension). Right now it is very simple (popup with an embed) but i have ideas for future versions including:

1. popup button next to text field
   
2. automatic entering icon name
3. search in icon field
   
   
   
   Sorry for the bad drawing

This does sound like this topic and it is inspired from this I just wanted more support (eg. mac, Chromebook, Linux)

unfortunately the main part of the extension does not work

Code stuff

| this is because "some sites allow embedding only from some sites or some don’t even allow
| embedding. the site looks at the request headers to check whether it is being embedded
|
| you should read
|
| Content Security Policy (CSP) - HTTP | MDN
|
| Same-origin policy - Web security | MDN
|
| " -codeboi on stack overflow (Embedding
| Google Classroom in HTML)
|
| So if someone could find an embeddable material icons website (with names/id?) that would be nice.
| (You can test it here htmledit.squarefree.com)
|
| Sorry if I went into to much detail about HTML.

I just need a website that can show icons, show their id/name (Eg. picture_as_pdf) to embed in my extension

Here are the files:

Material Icons For Kodular (1.5 KB)

how to install (video)

How to install unpacked extension in chrome

(I did not make this video)

I cannot directly upload the .crx file so it is in the zip.

I really hope we find another site

[Inglan1]

V 1.1

---

Hi everyone,

I just worked out how to do this.

I use the js window location:

---

https://www.w3schools.com/js/js_window_location.asp

---

and instead of embeding, I open a window:

---

HTML

<button onclick="myFunction()">Open icons</button>

<script>
function myFunction() {
  var myWindow = window.open("https://fonts.google.com/icons?kodular=", "", "width=700,height=700");
}
</script>

---

Tryit Editor v3.7

---

This is the url that opens: https://fonts.google.com/icons?kodular=
It has ?kodular= on the end so the extension can figure out if you open it normally (https://fonts.google.com/icons) or from the extension (https://fonts.google.com/icons?kodular=)

It will also simplify the icons website
from this:

to this:

and when you click one of the icons it will copy its “id” (Eg: description)

---

What this is going to do (In english (sort of))

When a page loads {
    If Page URL contains "fonts.google.com/icons?kodular" //for search support {
        Simplify page
        Run JavaScript to setup more JavaScript //That copies the "id" when one of the icons are clicked
    }
}

---

---

Summary

---

This is an extension for kodular that opens a window with material icons and when you click them it will copy the id (Eg: description)

I will post the files later

-Inglan

---

---

---

---

---

---

---

PS: please provide feedback:

[evanmirk]

@Inglan1

I use the js window location:

JavaScript Window Location

window.location.replace('http://example.com');

It’s better than using window.location.href = 'http://example.com';

Using replace() is better because it does not keep the originating page in the session history, meaning the user won’t get stuck in a never-ending back-button fiasco.

If you want to simulate someone clicking on a link, use window.location.href

If you want to simulate an HTTP redirect, use window.location.replace

You can use assign() methods to JavaScript redirect to other pages like the following:

location.assign("http://example.com");

The difference between replace() method and assign() method(), is that replace() removes the URL of the current document from the document history, means it is not possible to use the “back” button to navigate back to the original document. So Use the assign() method if you want to load a new document, and want to give the option to navigate back to the original document.