{ "id": 1241, "date": "2022-08-27T18:24:08", "date_gmt": "2022-08-27T18:24:08", "guid": { "rendered": "https:\/\/darkslategray-bear-162723.hostingersite.com\/?p=1241" }, "modified": "2022-08-27T19:28:43", "modified_gmt": "2022-08-27T19:28:43", "slug": "code-example-of-chrome-manifest-version-3-with-websocket-server", "status": "publish", "type": "post", "link": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/code-example-of-chrome-manifest-version-3-with-websocket-server\/", "title": { "rendered": "Chrome Manifest Version 3 with Websocket Server" }, "content": { "rendered": "

I have been working on a chrome extension for a year. If you don’t know anything about chrome extensions or google platforms they are incredibly locked down, and have much fewer open features than are naturally available running code on your own computer. To be able to do certain advanced things from a chrome extension it is easier to send requests to a server that can do what you want. Google however has been pushing for security enhancements that make coding useful features in Chrome extensions even more difficult. When I began programming my chrome extension Manifest Version 2 was still useable, however since then all the old examples have been made obsolete, and the documentation is outdated for the new Manifest Version 3 framework. I spent a couple months asking in forums and searching for examples for making a chrome extension websocket client that could work with a websocket server and I couldn’t find an example anywhere. I eventually found some little bits of code on places like stackoverflow.com that I was eventually able to get working. I put this together as a working example of both a client and server with instructions on my Github.com<\/p>\n\n\n\n

If you want to check out my other programming projects check here<\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

https:\/\/github.com\/WyattSanders\/ChromeMV3WebsocketExample<\/a><\/p>", "protected": false }, "excerpt": { "rendered": "

I have been working on a chrome extension for a year. If you don’t know anything about chrome extensions or google platforms they are incredibly locked down, and have much fewer open features than are naturally available running code on your own computer. To be able to do certain advanced things from a chrome extension […]<\/p>", "protected": false }, "author": 1, "featured_media": 1254, "comment_status": "closed", "ping_status": "open", "sticky": false, "template": "", "format": "standard", "meta": { "footnotes": "" }, "categories": [ 8, 135, 3 ], "tags": [ 132, 134, 130 ], "class_list": [ "post-1241", "post", "type-post", "status-publish", "format-standard", "has-post-thumbnail", "hentry", "category-computers", "category-programming", "category-technology", "tag-chrome", "tag-google", "tag-programming" ], "yoast_head": "\nChrome Manifest Version 3 with Websocket Server - Wyatt Sanders<\/title>\n<meta name=\"description\" content=\"I put together some example code for using a Chrome Extension with Manifest Version 3 and websocket communication to a server.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chrome Manifest Version 3 with Websocket Server - Wyatt Sanders\" \/>\n<meta property=\"og:description\" content=\"I put together some example code for using a Chrome Extension with Manifest Version 3 and websocket communication to a server.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/\" \/>\n<meta property=\"og:site_name\" content=\"Wyatt Sanders\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-27T18:24:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-27T19:28:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/darkslategray-bear-162723.hostingersite.com\/wp-content\/uploads\/2022\/08\/Wyatt-Dall-e-2-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Wyatt\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Wyatt\" \/>\n<meta name=\"twitter:site\" content=\"@Wyatt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Wyatt\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/\"},\"author\":{\"name\":\"Wyatt\",\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/#\\\/schema\\\/person\\\/16cba5ffad1fd679b6af2f39ebb8cba3\"},\"headline\":\"Chrome Manifest Version 3 with Websocket Server\",\"datePublished\":\"2022-08-27T18:24:08+00:00\",\"dateModified\":\"2022-08-27T19:28:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/\"},\"wordCount\":223,\"publisher\":{\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/#\\\/schema\\\/person\\\/16cba5ffad1fd679b6af2f39ebb8cba3\"},\"image\":{\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Wyatt-Dall-e-2-2.jpg\",\"keywords\":[\"chrome\",\"google\",\"programming\"],\"articleSection\":[\"Computers\",\"Programming\",\"Technology\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/\",\"url\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/\",\"name\":\"Chrome Manifest Version 3 with Websocket Server - Wyatt Sanders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Wyatt-Dall-e-2-2.jpg\",\"datePublished\":\"2022-08-27T18:24:08+00:00\",\"dateModified\":\"2022-08-27T19:28:43+00:00\",\"description\":\"I put together some example code for using a Chrome Extension with Manifest Version 3 and websocket communication to a server.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/#primaryimage\",\"url\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Wyatt-Dall-e-2-2.jpg\",\"contentUrl\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Wyatt-Dall-e-2-2.jpg\",\"width\":1280,\"height\":1280,\"caption\":\"A robot at a computer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/code-example-of-chrome-manifest-version-3-with-websocket-server\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chrome Manifest Version 3 with Websocket Server\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/#website\",\"url\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/\",\"name\":\"Wyatt Sanders\",\"description\":\"Jacksonville Engineer\",\"publisher\":{\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/#\\\/schema\\\/person\\\/16cba5ffad1fd679b6af2f39ebb8cba3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/#\\\/schema\\\/person\\\/16cba5ffad1fd679b6af2f39ebb8cba3\",\"name\":\"Wyatt\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/FB_IMG_1527477153419.jpg\",\"url\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/FB_IMG_1527477153419.jpg\",\"contentUrl\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/FB_IMG_1527477153419.jpg\",\"width\":1080,\"height\":1080,\"caption\":\"Wyatt\"},\"logo\":{\"@id\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/FB_IMG_1527477153419.jpg\"},\"sameAs\":[\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\",\"https:\\\/\\\/x.com\\\/Wyatt\"],\"url\":\"https:\\\/\\\/darkslategray-bear-162723.hostingersite.com\\\/es\\\/author\\\/wyatt\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->", "yoast_head_json": { "title": "Chrome Manifest Version 3 with Websocket Server - Wyatt Sanders", "description": "I put together some example code for using a Chrome Extension with Manifest Version 3 and websocket communication to a server.", "robots": { "index": "index", "follow": "follow", "max-snippet": "max-snippet:-1", "max-image-preview": "max-image-preview:large", "max-video-preview": "max-video-preview:-1" }, "canonical": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/", "og_locale": "es_MX", "og_type": "article", "og_title": "Chrome Manifest Version 3 with Websocket Server - Wyatt Sanders", "og_description": "I put together some example code for using a Chrome Extension with Manifest Version 3 and websocket communication to a server.", "og_url": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/", "og_site_name": "Wyatt Sanders", "article_published_time": "2022-08-27T18:24:08+00:00", "article_modified_time": "2022-08-27T19:28:43+00:00", "og_image": [ { "width": 1280, "height": 1280, "url": "https:\/\/darkslategray-bear-162723.hostingersite.com\/wp-content\/uploads\/2022\/08\/Wyatt-Dall-e-2-2.jpg", "type": "image\/jpeg" } ], "author": "Wyatt", "twitter_card": "summary_large_image", "twitter_creator": "@Wyatt", "twitter_site": "@Wyatt", "twitter_misc": { "Escrito por": "Wyatt", "Tiempo de lectura": "1 minuto" }, "schema": { "@context": "https:\/\/schema.org", "@graph": [ { "@type": "Article", "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/#article", "isPartOf": { "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/" }, "author": { "name": "Wyatt", "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/#\/schema\/person\/16cba5ffad1fd679b6af2f39ebb8cba3" }, "headline": "Chrome Manifest Version 3 with Websocket Server", "datePublished": "2022-08-27T18:24:08+00:00", "dateModified": "2022-08-27T19:28:43+00:00", "mainEntityOfPage": { "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/" }, "wordCount": 223, "publisher": { "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/#\/schema\/person\/16cba5ffad1fd679b6af2f39ebb8cba3" }, "image": { "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/#primaryimage" }, "thumbnailUrl": "https:\/\/darkslategray-bear-162723.hostingersite.com\/wp-content\/uploads\/2022\/08\/Wyatt-Dall-e-2-2.jpg", "keywords": [ "chrome", "google", "programming" ], "articleSection": [ "Computers", "Programming", "Technology" ], "inLanguage": "es" }, { "@type": "WebPage", "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/", "url": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/", "name": "Chrome Manifest Version 3 with Websocket Server - Wyatt Sanders", "isPartOf": { "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/#website" }, "primaryImageOfPage": { "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/#primaryimage" }, "image": { "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/#primaryimage" }, "thumbnailUrl": "https:\/\/darkslategray-bear-162723.hostingersite.com\/wp-content\/uploads\/2022\/08\/Wyatt-Dall-e-2-2.jpg", "datePublished": "2022-08-27T18:24:08+00:00", "dateModified": "2022-08-27T19:28:43+00:00", "description": "I put together some example code for using a Chrome Extension with Manifest Version 3 and websocket communication to a server.", "breadcrumb": { "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/#breadcrumb" }, "inLanguage": "es", "potentialAction": [ { "@type": "ReadAction", "target": [ "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/" ] } ] }, { "@type": "ImageObject", "inLanguage": "es", "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/#primaryimage", "url": "https:\/\/darkslategray-bear-162723.hostingersite.com\/wp-content\/uploads\/2022\/08\/Wyatt-Dall-e-2-2.jpg", "contentUrl": "https:\/\/darkslategray-bear-162723.hostingersite.com\/wp-content\/uploads\/2022\/08\/Wyatt-Dall-e-2-2.jpg", "width": 1280, "height": 1280, "caption": "A robot at a computer" }, { "@type": "BreadcrumbList", "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/code-example-of-chrome-manifest-version-3-with-websocket-server\/#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https:\/\/darkslategray-bear-162723.hostingersite.com\/" }, { "@type": "ListItem", "position": 2, "name": "Chrome Manifest Version 3 with Websocket Server" } ] }, { "@type": "WebSite", "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/#website", "url": "https:\/\/darkslategray-bear-162723.hostingersite.com\/", "name": "Wyatt Sanders", "description": "Jacksonville Engineer", "publisher": { "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/#\/schema\/person\/16cba5ffad1fd679b6af2f39ebb8cba3" }, "potentialAction": [ { "@type": "SearchAction", "target": { "@type": "EntryPoint", "urlTemplate": "https:\/\/darkslategray-bear-162723.hostingersite.com\/?s={search_term_string}" }, "query-input": { "@type": "PropertyValueSpecification", "valueRequired": true, "valueName": "search_term_string" } } ], "inLanguage": "es" }, { "@type": [ "Person", "Organization" ], "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/#\/schema\/person\/16cba5ffad1fd679b6af2f39ebb8cba3", "name": "Wyatt", "image": { "@type": "ImageObject", "inLanguage": "es", "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/wp-content\/uploads\/2021\/10\/FB_IMG_1527477153419.jpg", "url": "https:\/\/darkslategray-bear-162723.hostingersite.com\/wp-content\/uploads\/2021\/10\/FB_IMG_1527477153419.jpg", "contentUrl": "https:\/\/darkslategray-bear-162723.hostingersite.com\/wp-content\/uploads\/2021\/10\/FB_IMG_1527477153419.jpg", "width": 1080, "height": 1080, "caption": "Wyatt" }, "logo": { "@id": "https:\/\/darkslategray-bear-162723.hostingersite.com\/wp-content\/uploads\/2021\/10\/FB_IMG_1527477153419.jpg" }, "sameAs": [ "https:\/\/darkslategray-bear-162723.hostingersite.com", "https:\/\/x.com\/Wyatt" ], "url": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/author\/wyatt\/" } ] } }, "_links": { "self": [ { "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/posts\/1241", "targetHints": { "allow": [ "GET" ] } } ], "collection": [ { "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/posts" } ], "about": [ { "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/types\/post" } ], "author": [ { "embeddable": true, "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/users\/1" } ], "replies": [ { "embeddable": true, "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/comments?post=1241" } ], "version-history": [ { "count": 3, "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/posts\/1241\/revisions" } ], "predecessor-version": [ { "id": 1258, "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/posts\/1241\/revisions\/1258" } ], "wp:featuredmedia": [ { "embeddable": true, "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/media\/1254" } ], "wp:attachment": [ { "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/media?parent=1241" } ], "wp:term": [ { "taxonomy": "category", "embeddable": true, "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/categories?post=1241" }, { "taxonomy": "post_tag", "embeddable": true, "href": "https:\/\/darkslategray-bear-162723.hostingersite.com\/es\/wp-json\/wp\/v2\/tags?post=1241" } ], "curies": [ { "name": "wp", "href": "https:\/\/api.w.org\/{rel}", "templated": true } ] } }