Fix: Missing cookies with same names

packages/extension/src/localStore/cookieStore.ts

@@ -18,6 +18,7 @@
  */
 import updateStorage from './updateStorage';
 import type { TabData, CookieData } from './types';
+import { getCookieKey } from '../utils/getCookieKey';
 
 const CookieStore = {
   /**
@@ -31,24 +32,26 @@ const CookieStore = {
       const _updatedCookies = _prevCookies;
 
       for (const cookie of cookies) {
-        const cookieName = cookie.parsedCookie.name;
+        const { name, domain, path } = cookie.parsedCookie;
 
-        if (!cookieName) {
+        if (!name || !domain || !path) {
           continue;
         }
 
-        if (_updatedCookies?.[cookieName]) {
-          _updatedCookies[cookieName] = {
+        const cookieKey = getCookieKey(cookie.parsedCookie);
+
+        if (_updatedCookies?.[cookieKey]) {
+          _updatedCookies[cookieKey] = {
             ...cookie,
             frameIdList: Array.from(
               new Set<number>([
                 ...cookie.frameIdList,
-                ..._updatedCookies[cookieName].frameIdList,
+                ..._updatedCookies[cookieKey].frameIdList,
               ])
             ),
           };
         } else {
-          _updatedCookies[cookieName] = cookie;
+          _updatedCookies[cookieKey] = cookie;
         }
       }
 

packages/extension/src/localStore/tests/cookieStore.ts

@@ -134,16 +134,16 @@ describe('local store: CookieStore', () => {
   it('should add/update tab data', async () => {
     await CookieStore.update('123', cookieArray);
     expect(storage['123'].cookies).toStrictEqual({
-      countryCode1: cookieArray[0],
-      countryCode2: cookieArray[1],
+      'countryCode1.example1.com/': cookieArray[0],
+      'countryCode2.example2.com/': cookieArray[1],
     });
   });
 
   it('should delete cookies', async () => {
     await CookieStore.update('123', cookieArray);
-    await CookieStore.deleteCookie('countryCode1');
+    await CookieStore.deleteCookie('countryCode1.example1.com/');
     expect(storage['123'].cookies).toStrictEqual({
-      countryCode2: cookieArray[1],
+      'countryCode2.example2.com/': cookieArray[1],
     });
   });
 
@@ -154,7 +154,7 @@ describe('local store: CookieStore', () => {
       { ...cookieArray[0], frameIdList: [2] },
     ]);
     expect(storage['123'].cookies).toStrictEqual({
-      countryCode1: { ...cookieArray[0], frameIdList: [2, 1] },
+      'countryCode1.example1.com/': { ...cookieArray[0], frameIdList: [2, 1] },
     });
   });
 

packages/extension/src/utils/getCookieKey.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import { type Cookie as ParsedCookie } from 'simple-cookie';
+
+export const getCookieKey = (parsedCookie: ParsedCookie) => {
+  const cookieName = parsedCookie?.name;
+  const cookieDomain = parsedCookie?.domain;
+  const cookiePath = parsedCookie?.path;
+
+  return cookieName + cookieDomain + cookiePath;
+};

packages/extension/src/view/design-system/components/table/tableBody/bodyRow.tsx

@@ -26,6 +26,7 @@ import classNames from 'classnames';
  */
 import type { TableData } from '..';
 import BodyCell from './bodyCell';
+import { getCookieKey } from '../../../../../utils/getCookieKey';
 
 interface BodyRowProps {
   row: Row<TableData>;
@@ -47,13 +48,15 @@ const BodyRow = ({
   onRowClick,
   onKeyDown,
 }: BodyRowProps) => {
+  const cookieKey = getCookieKey(row.original.parsedCookie);
+
   const tableRowClassName = classNames(
     'outline-0',
-    row.original.parsedCookie.name !== selectedKey &&
+    cookieKey !== selectedKey &&
       (index % 2
         ? 'bg-anti-flash-white dark:bg-charleston-green'
         : 'bg-white dark:bg-raisin-black'),
-    row.original.parsedCookie.name === selectedKey &&
+    cookieKey === selectedKey &&
       (isRowFocused
         ? 'bg-gainsboro dark:bg-outer-space'
         : 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver')

packages/extension/src/view/devtools/components/cookies/cookiesListing/cookieTable/index.tsx

@@ -32,6 +32,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import Table from '../../../../../design-system/components/table';
 import { useContentPanelStore } from '../../../../stateProviders/contentPanelStore';
 import type { CookieTableData } from '../../../../cookies.types';
+import { getCookieKey } from '../../../../../../utils/getCookieKey';
 
 export interface CookieTableProps {
   cookies: CookieTableData[];
@@ -216,7 +217,7 @@ const CookieTable = ({ cookies, selectedFrame }: CookieTableProps) => {
       <Table
         table={table}
         selectedKey={
-          selectedKey === null ? null : selectedKey?.parsedCookie?.name
+          selectedKey === null ? null : getCookieKey(selectedKey?.parsedCookie)
         }
         onRowClick={onRowClick}
         onMouseEnter={() => setIsMouseInsideHeader(true)}

packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx

@@ -193,7 +193,10 @@ export const Provider = ({ children }: PropsWithChildren) => {
         Object.entries(tabData.cookies as { [key: string]: CookieData }).map(
           async ([key, value]: [string, CookieData]) => {
             const isCookieSet = Boolean(
-              await chrome.cookies.get({ name: key, url: value.url })
+              await chrome.cookies.get({
+                name: value?.parsedCookie?.name,
+                url: value.url,
+              })
             );
             _cookies[key] = {
               ...value,
@@ -234,7 +237,10 @@ export const Provider = ({ children }: PropsWithChildren) => {
             }
           ).map(async ([key, value]) => {
             const isCookieSet = Boolean(
-              await chrome.cookies.get({ name: key, url: value.url })
+              await chrome.cookies.get({
+                name: value?.parsedCookie?.name,
+                url: value.url,
+              })
             );
             _cookies[key] = {
               ...value,

packages/extension/src/worker/createCookieObject.ts

@@ -25,6 +25,7 @@ import { getDomain } from 'tldts';
  */
 import { getCurrentTabId } from '../utils/getCurrentTabId';
 import { findPreviousCookieDataObject } from './findPreviousCookieDataObject';
+import { getCookieKey } from '../utils/getCookieKey';
 
 /**
  * Create cookie object from cookieStore API cookie object, previously saved parsed cookie object if any, and recently captured request/response cookie header.
@@ -44,7 +45,7 @@ export async function createCookieObject(
   const prevParsedCookie = (
     await findPreviousCookieDataObject(
       (await getCurrentTabId()) || '0',
-      parsedCookie.name
+      getCookieKey(parsedCookie)
     )
   )?.parsedCookie;