feat: add Yahoo! JAPAN as search engine (#236)

* empty commit

* Add TODO comments

* Add Yahoo! JAPAN

* Update styles

README.md

@@ -33,6 +33,7 @@ This extension is available in the below search engines.
 | Qwant (iOS)      | :heavy_check_mark: | :heavy_check_mark: | \*1                | :heavy_check_mark: |
 | Startpage        | :heavy_check_mark: |                    | :heavy_check_mark: | :heavy_check_mark: |
 | Startpage (iOS)  | :heavy_check_mark: |                    | :heavy_check_mark: | :heavy_check_mark: |
+| Yahoo! JAPAN     | :heavy_check_mark: |                    |                    |                    |
 
 \*1 Works only if you turn off "Always play videos on Qwant.com"
 

src/common/locales.ts

@@ -127,7 +127,8 @@ export type MessageName =
   | 'searchEngines_duckduckgoName'
   | 'searchEngines_ecosiaName'
   | 'searchEngines_qwantName'
-  | 'searchEngines_startpageName';
+  | 'searchEngines_startpageName'
+  | 'searchEngines_yahooJapanName';
 
 export type MessageName1 =
   | 'error'

src/common/search-engines.ts

@@ -1,6 +1,13 @@
 import { MessageName0 } from './locales';
 
-export type SearchEngineId = 'google' | 'bing' | 'duckduckgo' | 'ecosia' | 'qwant' | 'startpage';
+export type SearchEngineId =
+  | 'google'
+  | 'bing'
+  | 'duckduckgo'
+  | 'ecosia'
+  | 'qwant'
+  | 'startpage'
+  | 'yahooJapan';
 
 export type SearchEngine = {
   contentScripts: {
@@ -302,4 +309,15 @@ export const SEARCH_ENGINES: Readonly<Record<SearchEngineId, Readonly<SearchEngi
       name: 'searchEngines_startpageName',
     },
   },
+  yahooJapan: {
+    contentScripts: [
+      {
+        matches: ['https://search.yahoo.co.jp/search?*'],
+        runAt: 'document_idle',
+      },
+    ],
+    messageNames: {
+      name: 'searchEngines_yahooJapanName',
+    },
+  },
 };

src/locales/en.json.ts

@@ -401,4 +401,7 @@ exportAsMessages('_locales/en/messages.json', {
 
   // The localized name of Startpage.
   searchEngines_startpageName: 'Startpage.com',
+
+  // The localized name of Yahoo! JAPAN.
+  searchEngines_yahooJapanName: 'Yahoo! JAPAN',
 });

src/scripts/search-engines.ts

@@ -4,6 +4,7 @@ import { ecosia } from './search-engines/ecosia';
 import { google } from './search-engines/google';
 import { qwant } from './search-engines/qwant';
 import { startpage } from './search-engines/startpage';
+import { yahooJapan } from './search-engines/yahoo-japan';
 import { SearchEngine, SearchEngineId } from './types';
 
 export const SEARCH_ENGINES: Readonly<Record<SearchEngineId, Readonly<SearchEngine>>> = {
@@ -13,4 +14,5 @@ export const SEARCH_ENGINES: Readonly<Record<SearchEngineId, Readonly<SearchEngi
   ecosia,
   qwant,
   startpage,
+  yahooJapan,
 };

src/scripts/search-engines/yahoo-japan-desktop.ts

@@ -0,0 +1,47 @@
+import type { SerpHandler } from '../types';
+import { handleSerp } from './helpers';
+
+const webHandler = handleSerp({
+  globalStyle: {
+    '[data-ub-blocked="visible"]': {
+      backgroundColor: 'var(--ub-block-color, rgba(255, 192, 192, 0.5))',
+    },
+    '.ub-button': {
+      color: 'var(--ub-link-color, var(--color-link, #000d99))',
+      textDecoration: 'underline',
+    },
+    '.ub-button:hover': {
+      color: '#cc3434',
+    },
+  },
+  controlHandlers: [
+    {
+      target: '.Hits__item',
+      style: {
+        color: '#666',
+        marginLeft: '8px',
+      },
+    },
+  ],
+  entryHandlers: [
+    {
+      target: '.sw-CardBase',
+      url: '.sw-Card__titleInner',
+      title: '.sw-Card__titleMain',
+      actionTarget: '.sw-Card__floatContainer',
+      actionStyle: {
+        fontSize: '1.4rem',
+        lineHeight: 1.4,
+      },
+    },
+  ],
+});
+
+const handlers: Readonly<Record<string, SerpHandler | undefined>> = {
+  // Web
+  '/search': webHandler,
+};
+
+export const getDesktopSerpHandler = (path: string): SerpHandler | null => {
+  return handlers[path] ?? null;
+};

src/scripts/search-engines/yahoo-japan-mobile.ts

@@ -0,0 +1,42 @@
+import type { SerpHandler } from '../types';
+import { handleSerp } from './helpers';
+
+const webHandler = handleSerp({
+  globalStyle: {
+    '[data-ub-blocked="visible"]': {
+      backgroundColor: 'var(--ub-block-color, rgba(255, 192, 192, 0.5))',
+    },
+    '.ub-button': {
+      color: 'var(--ub-link-color, var(--color-link, #000d99))',
+    },
+  },
+  controlHandlers: [
+    {
+      target: '.SearchTool',
+      style: {
+        color: '#666',
+      },
+    },
+  ],
+  entryHandlers: [
+    {
+      target: '.sw-CardBase',
+      url: '.sw-Card__space',
+      title: '.sw-Card__titleMain',
+      actionTarget: '.sw-Card__floatContainer',
+      actionStyle: {
+        fontSize: '12px',
+        lineHeight: 1.6,
+      },
+    },
+  ],
+});
+
+const handlers: Readonly<Record<string, SerpHandler | undefined>> = {
+  // Web
+  '/search': webHandler,
+};
+
+export const getMobileSerpHandler = (path: string): SerpHandler | null => {
+  return handlers[path] ?? null;
+};

src/scripts/search-engines/yahoo-japan.ts

@@ -0,0 +1,15 @@
+import mobile from 'is-mobile';
+import { SEARCH_ENGINES } from '../../common/search-engines';
+import type { SearchEngine } from '../types';
+import { getDesktopSerpHandler } from './yahoo-japan-desktop';
+import { getMobileSerpHandler } from './yahoo-japan-mobile';
+
+export const yahooJapan: Readonly<SearchEngine> = {
+  ...SEARCH_ENGINES.yahooJapan,
+  getSerpHandler() {
+    const { pathname } = new URL(window.location.href);
+    return mobile({ tablet: false })
+      ? getMobileSerpHandler(pathname)
+      : getDesktopSerpHandler(pathname);
+  },
+};