{"id":2611,"date":"2022-05-18T08:38:20","date_gmt":"2022-05-18T05:38:20","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=2611"},"modified":"2022-05-18T08:59:26","modified_gmt":"2022-05-18T05:59:26","slug":"developing-currency-converter-chrome-extension","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2022\/05\/18\/developing-currency-converter-chrome-extension\/","title":{"rendered":"Developing Currency Converter Chrome Extension"},"content":{"rendered":"\n

In this post, I will explain the extension that I developed for the Chrome Internet Browser<\/strong> to convert the exchange rate to Turkish Lira.<\/p>\n\n\n\n

The extension that converts the dollar value selected on the visited website to TL with the current exchange rate works as in the picture below. Extension will be very useful especially when evaluating the price of the products we will buy.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

The image below shows the folder structure of the project.<\/p>\n\n\n\n

\"\"
folder structure<\/figcaption><\/figure><\/div>\n\n\n\n

Project’s manifest.json<\/strong> file; The options.html <\/strong>and popup.html<\/strong> files were not used in this project. It was left as a project template.<\/p>\n\n\n\n

{\n  "name": "Convert value",\n  "version": "1.0.0",\n  "manifest_version": 2,\n\n  "description": "Convert values",\n\n  "minimum_chrome_version": "35",\n\n  "icons": {\n    "16": "icons\/icon16.png",\n    "48": "icons\/icon48.png",\n    "128": "icons\/icon128.png"\n  },\n\n  "options_page": "options.html",\n\n  "background": {\n    "scripts": [".\/background\/background.js"],\n    "persistent": false\n  },\n\n  "browser_action": {\n    "default_popup": ".\/popup.html"\n  },\n\n  "content_scripts": [\n    {\n      "matches": ["*:\/\/*\/*"],\n      "js": [\n        "script.js"\n      ],\n      "css": [\n        "style.css"\n      ],\n      "all_frames": true\n    }\n  ],\n\n  "permissions": [\n    "contextMenus",\n    "notifications",\n    "clipboardWrite",\n    "tabs",\n    "activeTab"\n  ]\n}\n<\/pre><\/div>\n\n\n\n
background.js<\/strong> file is as follows. In order not to get stuck in CORS<\/strong>, we get the current rates data from the API with the fetch api<\/strong> in background.js.<\/p>\n\n\n\n
chrome.runtime.onMessage.addListener(\n    function(url, sender, onSuccess) {\n        fetch(url)\n            .then(response => response.json())\n            .then(responseText => onSuccess(responseText))\n        \n        return true;  \/\/ Will respond asynchronously.\n    }\n);<\/pre><\/div>\n\n\n\n
In the style.css <\/strong>file, we have defined style of the popup that will appear after selecting the currency amount on the visited page.<\/p>\n\n\n\n
#popup_converter8255 {\n    background-color: #FFF;\n    width: 170px;\n    height: 90px;\n    color: #8f9cb5;\n    font-size: 18px;\n    display: inline-block;\n    padding-top: 5px;\n    padding-right: 5px;\n    padding-bottom: 5px;\n    padding-left: 5px;\n    border: 3px solid;\n    border-color: #9AD3DE;\n    border-radius: 5px;\n    display: none;\n  }<\/pre><\/div>\n\n\n\n
We have put logic of the popup into code in the script.js<\/strong> file.<\/p>\n\n\n\n
function getSelectedText() {\n  var text = "";\n  if (typeof window.getSelection != "undefined") {\n    text = window.getSelection().toString();\n  } else if (\n    typeof document.selection != "undefined" &&\n    document.selection.type == "Text"\n  ) {\n    text = document.selection.createRange().text;\n  }\n  return text;\n}\n\nfunction doSomethingWithSelectedText(e) {\n  var selectedText = getSelectedText();\n  if (!selectedText.toString().trim().length) {\n    removePopup();\n    return;\n  }\n\n  if (selectedText && isNumeric(selectedText)) {\n    const x = e.clientX;\n    const y = e.clientY;\n    const currencyVal = getCurrency();\n    const calculatedCurrency = calculateCurrency(currencyVal, selectedText); \n\n    placePopup(x, y, calculatedCurrency);\n  }\n}\n\nlet currValueofFetchData;\n\nfunction getCurrency() {\n    const url = "http:\/\/hasanadiguzel.com.tr\/api\/kurgetir";\/\/ free currency rate api\n    \n    chrome.runtime.sendMessage( \/\/goes to bg_page.js\n        url,\n        data => {\n          currValueofFetchData = data.TCMB_AnlikKurBilgileri[0].BanknoteSelling;\n        }\n    );\n    currValueofFetchData = parseFloat(currValueofFetchData);\n    return currValueofFetchData;\n}\n\nfunction calculateCurrency(currencyVal, selectedText) {\n    return currencyVal*selectedText;\n}\n\nfunction isNumeric(n) {\n  return !isNaN(parseFloat(n)) && isFinite(n);\n}\n\nfunction placePopup(x_pos, y_pos, calculatedCurrency) {\n  const d = document.getElementById("popup_converter8255");\n  d.style.position = "fixed";\n  d.style.left = x_pos + "px";\n  d.style.top = y_pos + "px";\n  d.innerText = calculatedCurrency.toFixed(2) + " TL";\n  d.style.display = "block";\n\n}\n\nfunction removePopup() {\n  const d = document.getElementById("popup_converter8255");\n  d.style.display = "none";\n}\n\nfunction createPopupElement() {\n  const popup8255 = document.createElement("div");\n  if (popup8255.length < 0) {\n    return;\n  }\n  popup8255.setAttribute("id", "popup_converter8255");\n  document.body.appendChild(popup8255);\n}\n\nsetTimeout(createPopupElement, 1000);\n\ndocument.onmouseup = doSomethingWithSelectedText;\n<\/pre><\/div>\n\n\n\n
You can also develop such extensions that will increase your productivity while browsing websites.<\/p>\n\n\n\n
Good Luck…<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post, I will explain the extension that I developed for the Chrome Internet Browser to convert the exchange rate to Turkish Lira. The extension that converts the dollar value selected on the visited website to TL with the current exchange rate works as in the picture below. Extension will be very useful especially […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,50],"tags":[],"yoast_head":"\nDeveloping Currency Converter Chrome Extension - blog website<\/title>\n<meta name=\"description\" content=\"In this post, I will explain the extension that I developed for the Chrome Internet Browser to convert the exchange rate to Turkish Lira.The extension that converts the dollar value selected on the visited website to TL with the current exchange rate works as in the picture below. Extension will be very useful especially when evaluating the price of the products we will buy.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/2022\/05\/18\/developing-currency-converter-chrome-extension\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Developing Currency Converter Chrome Extension - blog website\" \/>\n<meta property=\"og:description\" content=\"In this post, I will explain the extension that I developed for the Chrome Internet Browser to convert the exchange rate to Turkish Lira.The extension that converts the dollar value selected on the visited website to TL with the current exchange rate works as in the picture below. Extension will be very useful especially when evaluating the price of the products we will buy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2022\/05\/18\/developing-currency-converter-chrome-extension\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-18T05:38:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-18T05:59:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2022\/05\/extension_img.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2022\/05\/18\/developing-currency-converter-chrome-extension\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2022\/05\/extension_img.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2022\/05\/extension_img.png\",\"width\":534,\"height\":598},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2022\/05\/18\/developing-currency-converter-chrome-extension\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2022\/05\/18\/developing-currency-converter-chrome-extension\/\",\"name\":\"Developing Currency Converter Chrome Extension - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2022\/05\/18\/developing-currency-converter-chrome-extension\/#primaryimage\"},\"datePublished\":\"2022-05-18T05:38:20+00:00\",\"dateModified\":\"2022-05-18T05:59:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"In this post, I will explain the extension that I developed for the Chrome Internet Browser to convert the exchange rate to Turkish Lira.The extension that converts the dollar value selected on the visited website to TL with the current exchange rate works as in the picture below. Extension will be very useful especially when evaluating the price of the products we will buy.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2022\/05\/18\/developing-currency-converter-chrome-extension\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2022\/05\/18\/developing-currency-converter-chrome-extension\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2022\/05\/18\/developing-currency-converter-chrome-extension\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Developing Currency Converter Chrome Extension\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2611"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=2611"}],"version-history":[{"count":17,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2611\/revisions"}],"predecessor-version":[{"id":2649,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2611\/revisions\/2649"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=2611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=2611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=2611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}