# Chrome extension A Chrome extension customizes and extends the Chrome browser, with documented APIs, permissions, and development guidance. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Everything we announced at Laracon US 2026 DevFeed: [Everything we announced at Laracon US 2026]() Original publisher: [Read original article]() Author: Ana Tavares Published: 2026-07-29T13:40:00Z Content type: article Language: en Sources: [Laravel Blog]() Topics: [Laravel](), [Cloud](), [developer tooling](), [PHP](), [Back end](), [Front end](), [MySQL](), [Next.js](), [Nuxt.js](), [Chrome extension](), [Neovim](), [Sublime Text]() Tags: [announcement](), [backend](), [chrome](), [chrome-extension](), [cloud](), [frontend](), [laravel](), [mysql](), [network](), [next-js](), [php](), [tools](), [vs-code](), [vue]() ### AI overview A roundup of Laracon US 2026 announcements covering Laravel framework updates, Laravel Cloud features, Laravel LSP support for multiple editors, Inertia DevTools, and human-in-the-loop controls for AI agents. ### Source excerpt Every Laravel framework and Cloud announcement from Laracon US 2026, including Laravel LSP, Inertia DevTools, managed queues, and scale-to-zero. ## How we built the new Table of Contents feature DevFeed: [How we built the new Table of Contents feature]() Original publisher: [Read original article]() Author: Scott Batson Published: 2026-07-23T14:28:55Z Content type: article Language: en Sources: [Medium]() Topics: [Chrome extension](), [data](), [Usability](), [Code](), [JavaScript]() Tags: [article](), [chrome-extension](), [code](), [extension](), [feature](), [javascript](), [programming](), [software-development](), [software-engineering](), [usability](), [web-development]() ### AI overview The article explains how Medium built a dynamic Table of Contents feature for its editor. It compares the approach of an existing Chrome extension, which inserts a static list into a post, with Medium's approach of generating the table of contents from the post body at render time so revisions remain reflected automatically. ### Source excerpt How a feature goes from idea to prototype to shipped For years, there's been this really popular Chrome extension for adding a table of contents to your Medium stories. Props to Vinicius De Antoni for writing a popular chrome extension all those years go. The extension was so popular, we even wrote about it in our Medium Handbook. How to make a table of contents for your Medium story The fact that it was so popular was a signal to me. There was a decent size of our user base that wanted this feature. So, at first I set out to just copy it. The Chrome extension extends the popup menu we have in the editor to add a new option. Just a styled button on the existing list. const inject = () => { const tooltipToggleMenu = document.querySelector( "[data-action=inline-menu]", ); const tooltip = document.querySelector(".inlineTooltip"); const tooltipMenu = document.querySelector(".inlineTooltip-menu"); const addEmbedButton = document.querySelector( ".inlineTooltip-menu [title='Add an embed']", ); if (!tooltip || !tooltipToggleMenu || !tooltipMenu || !addEmbedButton) { return; } tooltip.style.width = "auto"; const toCButton = document.querySelector("[data-action='inline-menu-toc']"); if (toCButton) { return; } const handleAddToCClick = (e) => { const container = document.querySelector(".is-selected"); tooltipToggleMenu.click(); container.innerHTML = generate().join(" "); setTimeout(() => { simulateKeydown(container, 13); }, 0); }; const addToCButton = addEmbedButton.cloneNode(true); const title = "Add a Table of Contents"; addToCButton.setAttribute("title", title); addToCButton.setAttribute("aria-label", title); addToCButton.setAttribute("data-action", "inline-menu-toc"); addToCButton.setAttribute( "data-action-value", "Generate a table of contents", ); addToCButton.setAttribute("data-default-value", "Table of contents"); addToCButton.innerHTML = "⋮"; addToCButton.style.color = "rgb(26, 137, 23)"; addToCButton.style.border = "1px solid"; addToCButton.style.fontWeight = "bo ## When It Makes Sense To "Block" The Main Thread DevFeed: [When It Makes Sense To "Block" The Main Thread]() Original publisher: [Read original article]() Author: hello@smashingmagazine.com (Victor Ayomipo) Published: 2026-07-17T08:00:00Z Content type: article Language: en Sources: [Articles on Smashing Magazine -- For Web Designers And Developers]() Topics: [JavaScript](), [Chrome extension](), [Latency](), [modern web development](), [Chrome](), [Concurrency]() Tags: [architecture](), [browser](), [chrome](), [chrome-extension](), [coding](), [javascript](), [latency](), [main-thread](), [performance](), [techniques](), [thread]() ### AI overview This article examines when blocking the browser's main thread can be faster than transferring work to a background worker. Using a Chrome screenshot extension as an example, it explains how serialization, copying, and deserialization can introduce enough latency to outweigh the responsiveness benefits of offloading computation. ### Source excerpt The common rule of thumb is to never "block" the browser's main thread when running JavaScript tasks. But is this a hard rule? Victor Ayomipo describes a use case he encountered involving a screenshot extension where he made an exception to the rule and decided that blocking the main thread was absolutely the right thing to do. ## Open source Chrome extension recreates LinkedIn from your data exports DevFeed: [Open source Chrome extension recreates LinkedIn from your data exports]() Original publisher: [Read original article]() Author: Alex Ewerlöf Published: 2026-06-28T17:41:27Z Content type: article Language: en Sources: [Alex Ewerlof Notes]() Topics: [Extension](), [Chrome extension](), [Open Source](), [App](), [data](), [CSV](), [GitHub](), [Single-page application (SPA)]() Tags: [app](), [chrome](), [chrome-extension](), [code](), [csv](), [extension](), [gdpr](), [github](), [offline](), [open-source]() ### AI overview The article introduces LinkedOut, a free open-source Chrome extension and offline single-page application that lets users inspect and browse data exported from LinkedIn. It describes the author's findings about the breadth of the export and explains how the app processes the data locally without gathering or transmitting it. ### Source excerpt An open source extension to recreate LinkedIn from your data exports ## How to Use Transformers.js in a Chrome Extension DevFeed: [How to Use Transformers.js in a Chrome Extension]() Original publisher: [Read original article]() Author: Nico Martin Published: 2026-04-23T00:00:00Z Content type: tutorial Language: en Sources: [Hugging Face - Blog]() Topics: [Chrome extension](), [transformers.js](), [gemma4](), [Artificial Intelligence](), [Local AI](), [Open Source](), [Code]() Tags: [artificial-intelligence](), [chrome](), [chrome-extension](), [code](), [extension](), [github](), [guide](), [inference](), [javascript](), [local](), [local-ai](), [manifest](), [on-device](), [open](), [open-source](), [transformers](), [transformers-js](), [ui](), [web]() ### AI overview A developer guide to building a local AI Chrome extension with Transformers.js under Manifest V3. It explains an architecture with a background service worker hosting models, a side-panel chat interface, and a content script for page extraction and highlighting, using the Gemma 4 Browser Assistant as a reference. ### Source excerpt We're on a journey to advance and democratize artificial intelligence through open source and open science. ## Meet HoloTab by HCompany. Your AI browser companion. DevFeed: [Meet HoloTab by HCompany. Your AI browser companion.]() Original publisher: [Read original article]() Author: Marc Thibault; Pierre-Louis Cedoz; Hamza Benchekroun; Kai Yuan; Aurélien Lac; Tony Wu; Antonio Loison; Axel Moyal; Emrick Sinitambirivoutin; Aleix Cambray Published: 2026-04-15T09:25:20Z Content type: release Language: en Sources: [Hugging Face - Blog]() Topics: [computer-use](), [Artificial Intelligence](), [Chrome extension](), [Chrome](), [browser](), [Web]() Tags: [ai](), [browser](), [chrome](), [chrome-extension](), [computer-use](), [model](), [web]() ### AI overview HoloTab is a Chrome extension that brings computer-use AI into the browser, allowing users to describe tasks that it carries out across websites. It also records user actions and narration to create reusable routines that can be rerun or scheduled. ### Source excerpt We built one of the most powerful computer-use AIs in the world. And made it directly accessible from your browser. On March 31st, we released Holo3, our most advanced computer-use model to date. Building something powerful is one thing; making it accessible and easy to use is another. We're doing both. HoloTab is a Chrome extension that navigates the web just like a person would. It automates tasks across any website with zero setup or technical skills required. ## Links in Bucket: the chrome-extension that I wrote without writing any code DevFeed: [Links in Bucket: the chrome-extension that I wrote without writing any code]() Original publisher: [Read original article]() Author: Leonidas Partsas Published: 2026-03-29T06:35:45Z Content type: article Language: en Sources: [le0nidas]() Topics: [Extension](), [Chrome extension](), [Code]() Tags: [ai](), [articles](), [chrome](), [chrome-extension](), [code](), [extension](), [know-your-tools](), [vibe-coding]() ### AI overview The article describes creating a Chrome extension called Links in Bucket to collect selected newsletter article links and later send them to NotebookLM for podcast generation. The author explains the use case and the role of prompts in building the extension without prior web-development experience. ### Source excerpt Newsletters have been a great source for my growth as an engineer. I'm subscribed in quite a few and I've even contributed to some. Unfortunately, I no longer have the time to sit down and read all the articles that piqued my interest. I'm always on the move for work or family matters or I ... Continue reading Links in Bucket: the chrome-extension that I wrote without writing any code -> ## How to Monetize a Browser Extension with a Freemium Model DevFeed: [How to Monetize a Browser Extension with a Freemium Model]() Original publisher: [Read original article]() Author: Ayush Agarwal Published: 2026-03-28T00:00:00Z Content type: tutorial Language: en Sources: [Dodo Payments Blog]() Topics: [Extension](), [Browser Extension](), [Chrome extension](), [Firefox extension]() Tags: [chrome](), [chrome-extension](), [extension](), [firefox](), [how-to](), [license-keys](), [payments](), [subscription-billing]() ### AI overview A guide to monetizing browser extensions with a freemium model. It covers keeping core functionality free, gating advanced features and usage limits, validating license keys on a server, and using subscription billing and customer self-service portals. ### Source excerpt Build a profitable freemium browser extension. Implement free vs paid feature gating, license key activation, and subscription billing for Chrome and Firefox extensions. ## How to Sell an AI-Powered Chrome Extension DevFeed: [How to Sell an AI-Powered Chrome Extension]() Original publisher: [Read original article]() Author: Ayush Agarwal Published: 2026-03-27T00:00:00Z Content type: tutorial Language: en Sources: [Dodo Payments Blog]() Topics: [Chrome extension](), [Artificial Intelligence](), [AI Models](), [API](), [Claude]() Tags: [ai](), [api](), [chrome](), [chrome-extension](), [claude](), [guide](), [how-to](), [license-keys](), [monetization](), [payments](), [token]() ### AI overview A guide to monetizing AI-powered Chrome extensions with billing models that account for variable token-based API costs. It covers credit-based billing, subscriptions, and license keys, with Dodo Payments handling payment, tax, and compliance considerations. ### Source excerpt Monetization guide for AI Chrome extensions. Handle variable token costs, implement credits-based billing, and deliver license keys for premium AI features. ## How to Monetize a Chrome Extension in 2026 (4 Models + Step-By-Step Setup) DevFeed: [How to Monetize a Chrome Extension in 2026 (4 Models + Step-By-Step Setup)]() Original publisher: [Read original article]() Author: Ayush Agarwal Published: 2026-03-23T00:00:00Z Content type: tutorial Language: en Sources: [Dodo Payments Blog]() Topics: [Chrome extension](), [Extension](), [Browser Extension](), [Code]() Tags: [2026](), [billing](), [business](), [chrome](), [chrome-extension](), [code](), [extension](), [global-payments](), [how-to](), [license-keys](), [monetization](), [payments](), [saas](), [subscriptions]() ### AI overview A practical guide to monetizing Chrome extensions in 2026. It explains freemium, subscriptions, license keys, one-time purchases, and usage-based models, and covers payment, tax compliance, license management, and implementation considerations. ### Source excerpt Chrome extension monetization models: freemium, subscriptions, license keys, one-time, usage-based. Code samples plus a license delivery walkthrough. ## Analysis of an advanced malicious Chrome extension DevFeed: [Analysis of an advanced malicious Chrome extension]() Original publisher: [Read original article]() Author: Wladimir Palant Published: 2025-02-03T14:05:37Z Content type: article Language: en Sources: [Almost Secure]() Topics: [Chrome extension](), [Extension](), [Code](), [Authorization]() Tags: [chrome](), [chrome-extension](), [code](), [extension](), [firebase](), [permission](), [permissions](), [run]() ### AI overview A technical analysis examines the Download Manager Integration Checklist Chrome extension and related extensions with malicious functionality. The article describes excessive website access requests, remotely downloaded content, dynamically added rules, and remote code execution through tabs.executeScript. It also reports that an update removed the malicious functionality and cleared extension storage. ### Source excerpt Two weeks ago I published an article on 63 malicious Chrome extensions. In most cases I could only identify the extensions as malicious. With large parts of their logic being downloaded from some web servers, it wasn't possible to analyze their functionality in detail. However, for the Download Manager Integration Checklist extension I have all parts of the puzzle now. This article is a technical discussion of its functionality that somebody tried very hard to hide. I was also able to identify a number of related extensions that were missing from my previous article. Update (2025-02-04): An update to Download Manager Integration Checklist extension has been released a day before I published this article, clearly prompted by me asking adindex about this. The update removes the malicious functionality and clears extension storage. Luckily, I've saved both the previous version and its storage contents. Contents The problematic extensions "Remote configuration" functionality The code being executed The "session" handling Who is behind these extensions? The problematic extensions Since my previous article I found a bunch more extensions with malicious functionality that is almost identical to Download Manager Integration Checklist. The extension Auto Resolution Quality for YouTube™ does not seem to be malicious (yet?) but shares many remarkable oddities with the other extensions. Name Weekly active users Extension ID Featured Freemybrowser 10,000 bibmocmlcdhadgblaekimealfcnafgfn ✓ AutoHD for Twitch™ 195 didbenpmfaidkhohcliedfmgbepkakam Free simple Adult Blocker with password 1,000 fgfoepffhjiinifbddlalpiamnfkdnim Convert PDF to JPEG/PNG 20,000 fkbmahbmakfabmbbjepgldgodbphahgc Download Manager Integration Checklist 70,000 ghkcpcihdonjljjddkmjccibagkjohpi ✓ Auto Resolution Quality for YouTube™ 223 hdangknebhddccoocjodjkbgbbedeaam Adblock.mx - Adblock for Chrome 1,000 hmaeodbfmgikoddffcfoedogkkiifhfe ✓ Auto Quality for YouTube™ 100,000 iaddfgegjgjelgkanamleadckkpnjpjc Anti ## Launch Week 7 Hackathon Winners DevFeed: [Launch Week 7 Hackathon Winners]() Original publisher: [Read original article]() Author: Tyler Shukert Published: 2023-04-24T07:00:00Z Content type: news Language: en Sources: [Supabase Blog]() Topics: [Hackathon](), [Artificial Intelligence](), [Supabase](), [AI Chat](), [ChatGPT](), [ChatGPT API](), [Chrome extension](), [Open Source](), [X (Twitter)](), [Web](), [API keys]() Tags: [ai](), [chatgpt](), [chrome-extension](), [hackathon](), [launch](), [macos](), [open-source](), [sql](), [web]() ### AI overview Supabase announces the winners of its Launch Week 7 hackathon, which featured an AI theme. Winning projects included an open-source Chrome extension for chatting with webpages through the ChatGPT API, AI tools for educational content and social-media threads, video and browsing-history search assistants, an AI drum-pattern generator, a natural-language charting tool, and an open-source tweet scheduler. ### Source excerpt Announcing the winners of the Launch Week 7 Hackathon! ## What's new in Figma: September 2022 DevFeed: [What's new in Figma: September 2022]() Original publisher: [Read original article]() Author: Chandler Sopko Published: 2022-09-28T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Chrome extension](), [Google Calendar](), [Template]() Tags: [chrome-extension](), [component](), [components](), [design-systems](), [features](), [figma](), [integration](), [latest-features](), [use-cases]() ### AI overview A roundup of Figma and FigJam updates from September 2022, including component properties, a Google Chrome extension for attaching files to Google Calendar events, Schema design-systems programming, and hundreds of new templates. ### Source excerpt A monthly round-up of the latest features, fixes, and finesse we've added to Figma and FigJam. ## incident.io + Indent - on-demand system access DevFeed: [incident.io + Indent - on-demand system access]() Original publisher: [Read original article]() Author: incident.io Published: 2022-08-25T00:00:00Z Content type: article Language: en Sources: [The incident.io Blog]() Topics: [incident](), [Authorization](), [Incident response](), [incident management](), [Cloud](), [Slack](), [Web app](), [Chrome extension](), [systems]() Tags: [access-control](), [chrome-extension](), [cloud](), [incident](), [incident-channel](), [incident-management](), [incident-response](), [infrastructure](), [integration](), [outage](), [post-mortem](), [slack](), [slack-incident](), [soc2](), [web-app]() ### AI overview The article announces an integration between incident.io and Indent that provides time-bound access to cloud applications and infrastructure during incidents. On-call responders can request access from Slack, receive automatic or reviewer-based approval, configure access durations, request extensions, and track access decisions until expiration. ### Source excerpt An overview of our integration with Indent - an on-demand access control provider. ## Profiling Django views with Scooby profiler DevFeed: [Profiling Django views with Scooby profiler]() Original publisher: [Read original article]() Published: 2018-09-20T00:00:00Z Content type: article Language: en Sources: [HackerEarth]() Topics: [Django](), [debug](), [Chrome extension](), [Redis](), [Ajax](), [npm](), [Python](), [Front end](), [HTTP]() Tags: [backend](), [chrome](), [chrome-extension](), [debug](), [django](), [front-end](), [http](), [npm](), [profiling](), [python](), [redis](), [web]() ### AI overview This article introduces Scooby, a Django and Python profiling package designed to inspect SQL and other plugin statistics for AJAX requests. It stores profiling data temporarily in Redis and exposes the results through a Chrome extension, avoiding the performance costs of injecting statistics into rendered HTML. ### Source excerpt Earlier in 2016, I came up with the idea of creating a Python module which could provide functionality of profiling functions w.r.t. SQL queries and tell exactly at what lines of function, the queries were happening. I called that package Goofy and created it with the engineering of Python AST manipulation. You can read the post on it here later. It helped us profiling views serving AJAX requests but it had some limitations too. E.g. we couldn't see the whole callstack trace of the queries and couldn't analyze the queries. In an internal hackathon @HackerEarth which happened in Nov 2017, I revisited this problem and tried to come up with a profiler, through which we could see the stats on front-end and which should be much lightweight and would work with AJAX requests. I named this package Scooby. Idea We have been using the package django-debug-toolbar, but it wasn't enough because it didn't have the functionality of profiling AJAX requests. And because of the size of our codebase, it had made serving web pages slower in develop mode because it injects the stats in HTML by rendering and rendering takes time. So we needed an alternative. The idea while creating the Scooby package was to have a similar type of package as of django-debug-toolbar but instead of rendering the stats to HTML, we can dump the stats data to some backend store e.g. Redis where it will reside temporarily. And show the stats on front-end using a chrome extension. Implementation We had to create a Python/Django package for backend and a npm package for front-end which would build the chrome-extension. We took the decision of using ReactJS as rendering framework for the chrome-extension. In backend, we just had to create and put a new middleware which will do the job of collecting profiled stats for different plugins (E.g. SQL, Memcache etc.) and put the stats to Redis against some UUID as key. We would put that key as value of a custom header (X-Scooby) in HTTP response, so that chrome-extensio ## Chrome extensions for quick site redesigns DevFeed: [Chrome extensions for quick site redesigns]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2017-09-20T00:00:00Z Content type: tutorial Language: en Sources: [Monica Dinculescu]() Topics: [Chrome extension](), [Chrome](), [Extension](), [CSS](), [Web Development](), [Google Calendar](), [Picasso]() Tags: [chrome](), [chrome-extension](), [css](), [extensions](), [html](), [picasso]() ### AI overview The article explains how Chrome extensions can inject CSS into specific webpages, making them useful for quickly experimenting with site redesigns without changing the underlying project or build setup. It also discusses sharing extensions as ZIP files, CSS specificity considerations, and the Picasso Google Calendar theme as an example. ### Source excerpt There's this thing I hate about the modern web which is that sites are rarely one giant html file filled with goodies. You can't just "run a site" locally. You need an npm or a gulp step or a docker if you're lucky. And probably a local server, but not the one you have installed. Which, I mean, makes sense, because modern web sites are big and powerful and have complicated front-ends and do more things than a giant html file would. But it also kind of sucks because the build ceremonial sacrifices can be a bit overwhelming. Maybe you just want to see what the links would look like if they didn't have underlines. Maybe you want to change the fonts. Maybe you're never even going to ship these changes, you just want to get a feel for them. Boy, have I got an idea for you: Chrome extensions. Hear me out. A Chrome extension is a bit of code that runs on a specific page (or set of pages). It can be anything you want. In particular, it can be a CSS stylesheet. Then, re-theming a site is just a matter of installing this Chrome extension. If you want to share it with people, you can just zip it up and send it around. It's obviously not production ready, but it's amaaaaazing for prototyping. I made a glitch project that gets you started with writing a Chrome extension that injects a CSS stylesheet. There's only one thing you need to know: this stylesheet is a User Agent stylesheet, which means it has the lowest specificity. So some of its styles won't get applied unless you slap some !importants on it (or have extra specific selectors). Or, if you have an ID, you can do my favourite CSS hack ever that I learnt from Surma and will take to the grave: #foo#foo { /* this is a really winner #foo selector */ color: red; } --- That's it! If you want to see an example of such an extension in the wild, I made picasso, which is just a pretty Google Calendar theme. Originally it was just a local extension I kept on my machine, but eventually I published it because I realized other people ## Inspecting your GraphQL client in the browser DevFeed: [Inspecting your GraphQL client in the browser]() Original publisher: [Read original article]() Author: Ramya Nagarajan Published: 2017-07-11T18:25:00Z Content type: tutorial Language: en Sources: [Apollo Blog]() Topics: [GraphQL](), [apollo-client](), [Chrome extension](), [Chrome](), [debug](), [dev-tools](), [Front end]() Tags: [apollo-client](), [browser](), [chrome](), [chrome-extension](), [debug](), [dev-tools](), [developer-tools](), [frontend](), [graphql](), [tooling]() ### AI overview This tutorial explains how to use the Apollo Client Developer Tools Chrome extension to inspect and debug GraphQL applications. It covers the built-in GraphiQL query IDE, watched queries inspector, mutation log, and store inspector, including how to run queries through an already configured Apollo Client instance. ### Source excerpt Late last year, Danielle Man blogged about the Apollo Client Developer Tools Chrome extension, which helps you debug your Apollo-Client-based GraphQL app. The Dev Tools launched with three main features, and we're excited to announce the first major addition today! ## Sqrome, a Chrome extension DevFeed: [Sqrome, a Chrome extension]() Original publisher: [Read original article]() Author: Square Engineering Published: 2014-09-05T16:07:00Z Content type: tutorial Language: en Sources: [Square Corner Blog RSS Feed]() Topics: [Chrome extension](), [Chrome](), [JavaScript](), [CSS](), [HTML]() Tags: [chrome](), [chrome-extension](), [css](), [engineering](), [html](), [javascript](), [manifest](), [vpn]() ### AI overview This tutorial describes Sqrome, an internal Chrome extension built during Square's hack week to show colleague information alongside Gmail email threads. It explains the extension's files, manifest, background and content scripts, local caching, directory queries, and internal publication. ### Source excerpt Tackling a different kind of scaling problem. ## Hacker News Redesign DevFeed: [Hacker News Redesign]() Original publisher: [Read original article]() Published: 2012-04-23T15:41:57Z Content type: article Language: en Sources: [Blog by Michael Dubakov]() Topics: [color](), [Chrome extension](), [Extension]() Tags: [article](), [chrome-extension](), [cognitive-load](), [color](), [design](), [information-density](), [redesign]() ### AI overview The article presents a redesign of Hacker News intended to make posts easier to scan. It encodes post age with color and point counts with circle size, uses larger titles and aligned comments, and hides detailed values until needed. ### Source excerpt I read the post about Hacker News re-design and didn't like it. The resulting design is not good. It might be better than original design for large screens, but it distracts people from information. Orange numbers, large vote buttons, quite poor information density... I am not a designer, but the problem looks quite simple and interesting. Here is my attempt to create a better design for Hacker News. I am aware about some weak sides in this solution and will enumerate them in the end, be patient and don't fight back right away. First, I asked myself, how people decide that an article is worth they attention? The process is close to this one: Read the title - is it interesting to me? Check points - how other people voted? Check comments - are there any hot discussion? Check age - is it fresh or not? Check source - is it credible? (well, this is somewhat stretched) Currently you have to scan through all numbers of points, comments and age, but that is quite slow. You have to read every number to do a comparison -- quite high cognitive load. Is there a better way? I think there is. I took two most important variables and encoded them: Age is encoded with color. Dark color - fresh news (less than an hour). Light color - old news (half a day or more). Points are encoded with size. Obviously, large circle shows that a post is popular. I took all points and age values from the first HN page and analyzed them. It appeared that 5 groups are enough for age, while 6 groups for points may work. Another idea was to highlight titles. Here I took a theme of Readable HN Chrome extension and modified it. Each news item is a "one-liner" with a large title, so you can scan items easier. Comments are aligned to speed up comparison as well. Here is the final result: You can find important and fresh articles really quickly. This design provides a high level view on all news. I explicitly removed numbers like 1..30 from the page. I don't think they are useful. Something much simpler can be a ## Converting Bookmarklet to Chrome Extension DevFeed: [Converting Bookmarklet to Chrome Extension]() Original publisher: [Read original article]() Author: Map Published: 2011-02-02T08:34:49Z Content type: tutorial Language: en Sources: [Craig Kerstiens]() Topics: [Chrome extension](), [Extension](), [JavaScript](), [HTML](), [Google]() Tags: [chrome](), [chrome-extension](), [extension](), [how-to](), [html](), [javascript](), [manifest]() ### AI overview A tutorial on converting an existing bookmarklet into a Chrome extension. It highlights the need for a background HTML page with an event listener and provides a sample manifest, event handler, and JavaScript call. ### Source excerpt Google's documentation is pretty good when it comes to how to create an extension that opens a full page and has large functionality. But if you're more interested in transforming an existing bookmarklet into an extension there's not great quality on it. The steps themselves are really quite simple. The big key that's not heavily documented is creating a background html that creates an event listener. After the jump is a full sample that would then call your javascript to activate the bookmarklet: manifest.json background.html chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.sendRequest(tab.id, {fun: "callBM"}) }); bm.js