레이블이 Chrome인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Chrome인 게시물을 표시합니다. 모든 게시물 표시

mac paste and match style

지금까지 맥에서 서식없이 붙여넣기(붙여넣고 스타일 일치시키기)는 cmd+shift+v 로 알고 있었는데 찾아보니 요렇다.
cmd+shift+option+v

붙여넣고 스타일 일치시키기 단축키가 chrome 과 safari 가 다르다.


google docs 에 정리된 jira url 을 (atlassian)wiki 에 복붙하면 jira 아이콘(링크)가 안되 길래 브라우저 주소표시줄에서 복사하고 다시 붙여넣고 있었다.

크롬에서는 cmd+shift+v 로 하면 서식없이 붙여넣기가 된다.
하지만 wiki 에서는 cmd+shift+option+v 를 사용해야 서식없이 붙이기가 되는것 같다.

control characters in chrome

control-character(제어문자)가 포한된 경우 아래와 같이 chrome 에선 보이지 않는다.
때문에 잘못된 문자가 포함돼도 화면상으로 알 수가 없는 문제가 있다.

# 테스트 html
# 요것도 크롬으로 열면 안보이지만 safari로 열면 제어문자가 X 박스로 표시된다.

(top) chrome: Version 123.0.6312.87 (Official Build) (arm64)
(bottom) safari: Version 17.2.1 (19617.1.17.11.1)

크로미움에서 제어문자가 렌더링 필요에 대한 이슈가 올라와 있다.

2024-04-01 현재 발생하는데 언제쯤 수정이 될지 지켜봐야겠다.

disable screen lock when filling passwords in chrome

크롬에서 언제부터인가 저장된 ID/Password 를 자동으로 채워넣을때 다음과 같이 지문이나 패스워드를 입력하려고 나온다.

이 과정을 없애려면 아래 메뉴를 비활성화 하면 된다.
chrome://password-manager/settings > (hamburger menu) > settings > Use your screen lock when filling passwords


#####


패스워드가 취약해서 다음과 같은 경고 팝업이 나온다.

이를 사용하지 않으려면 아래 메뉴를 비활성화 하면 된다.
chrome://settings/security > Warn you if passwords are exposed in a data breach

추가로 디폴트로 내가 방문한 사이트 정보를 구글에 제공하는데 왠지 꺼림직하면 아래 메뉴를 비활성하면 된다.
chrome://settings/security > Help improve security on the web for everyone

chrome cookie editor extension

크롬에서 쿠키 수정시 그동안 EditThisCookie extension 을 사용했는데,
크롬 버전이 올라가면서 언제부터 인가 쿠키 값을 추가해도 적용되지 않는 문제가 있다.
확인해 보면 2020년 11월 22일 이후 업데이트가 되지 않았고,
깃헙(https://github.com/ETCExtensions/Edit-This-Cookie) 도 5년 넘게 새로운 커밋이 없다.

대신 cookie-editor extension 을 사용하면 새 쿠키값을 추가할 수 있다.

chrome 114 version popover error

# chrome 114 버전 이후 렌더링시 다음과 같은 에러 발생했다.

Found a 'popover' attribute with an invalid value.

# 공통 css 설정에 popover 를 다음과 같이 설정해야 한다.
[popover] {
    display: initial;
    position: initial;
    margin: initial;
    border: initial;
    background: initial;
    padding: initial;
    width: initial;
    height: initial;
    overflow: initial;
    inset: initial;
    color: initial;
}


good-bye adobe flash

말도 많고 탈도 많았던 adobe flash 가 2020년 12/31으로 종료된다.
(여기서 종료는 업데이트 및 배포가 중단된다는 의미)
아래는 어도비 사이트에 올라온 flash EOL(End Of Life) 내용이다.

chrome 에서도 2020년까지 flash 완전히 제거한다.

초기 다이나믹한 웹환경을 위해 거의 필수였던 flash 였는데 몇가지 문제가 있었다.
애니메이션 제작용인데, 액션 스크립트로 프로그래밍이 가능했고, 이와 동시에 보안적인 이슈가 많이 발생했다.
벡터 그래픽으로 계산량이 많아 cpu, gpu(11버전 부터 gpu 가속 기능이 추가 됐다)를 많이 사용하고 저사양의 컴퓨터를 느리게 한다.(예전 전화선으로 인터넷할땐 웹페이지 로딩시 flash 가 꽤 늦게 떴다.)
표준이 아닌 하나의 회사가 독점하는 폐쇄적인 기술로 여러 회사를 적으로 만들었다.(이래서 스티브 잡스가 싫어했다고 하는데, 다른 한편으로 adobe 가 포토샵 같은 이전까지는 애플 전용 프로그램을 윈도우에서도 동작하게 해서 애플하고 사이가 안좋아 져서 그런거라고도 한다.ㅎ 애플도 꽤 폐쇄적인데 그들만의 환경을 만들어 사용자를 가두는데, 그래도 잘 나가네~ㅋ)
이제는 webGL, webassembly, html5 에게 자리를 내주는 구나.

github notification

# 사내 Github PR review, push 등이 email 알림으로 오는데,
# email 은 잘 보지도 않고 쌓이기만 해서(메일 정리하는것도 일)
# 깃헙 email 알림을 비활성화
(깃헙 개인 settings -> Notifications -> Email notification preferences)

# notifier-for-github 크롬 익스텐션을 사용하면 깃헙 알림이 아이콘으로 표시된다.

# Root URL 설정 - 기본 https://github.com
# github enterprise 라면 https://github.회사.com 와 같이 설정한다.

# Token 설정
# github enterprise 라면 https://github.회사.com/settings/tokens
(깃헙 개인 settings -> Settings Developer settings -> Personal access tokens -> repo, notification 체크해서 생성)
# 또는 익스텐션 옵션 설정 "create token" 링크로 로그인하면
# 다음과 같이 repo, notification 체크된 상태로 토큰 설정을 할 수 있다.

# 이제 알림이 있다면 크롬에서 다음과 같이 알림 개수가 표시된다.

# notifier-for-github 익스텐션 background console 을 보면
# https://github.회사.com/api/v3/notifications?page=1&per_page=1
# 과 같이 요청하는것으로 보인다.

# 참고 - github notification api
# 사용자명(ysoftman)과 토큰(abc123456789)으로 사용할 수 있다.
curl 'https://github.com/api/v3/notifications?page=1&per_page=1' -u ysoftman:abc123456789


set-cookie was blocked 에러

vue+go 로컬 개발시 서버 응답으로 다음과 같이 쿠키 설정 헤더값을 받았다.
set-cookie: jwt=xxxxx; Expires=Wed, 18 Nov 2020 08:12:17 GMT

그런데 쿠키가 설정되지 않는다.
크롬 개발자 도구 cookies 항목을 보면 다음과 같이 secure 부분에 알림 아이콘이 표시되고


마우스 오버하면 tooltip 메시지를 확인 할 수 있다.

This Set-Cookie was blocked because it was not sent over a secure connection and would have overwritten a
cookie with the Secure attribute.

이미 https://localhost 로 jwt 값이 있는게 원인이었다.

쿠키는 도메인에 따라 설정되지만 https 연결로 secure 속성을 가진다.
localhost 라는 도메인으로 jwt 쿠키가 있어 덮어쓰기를 시도하는데,
https 라 secure 하지 않는 http 연결에서의 set-cookie 는 허용되지 않는다.

해결방법1
기존 https://localhost 의 jwt 쿠키를 삭제

해결방법2
다른 쿠키명 사용
"github.com/dgrijalva/jwt-go" 를 사용해 쿠키명은 다르게 해도 된다.
("github.com/go-chi/jwtauth" 는 jwt 라는 쿠키명은 하드코딩되어 있다.)

# 참고

dark reader 다크모드

크롬에서 다크모드를 사용하기위해
github => github dark theme 

그외 사이트들은 => stylish
으로 다크모드를 사용했다.

그런데 dark reader 하나로 모든 사이트를 다크모드로 맘에 들게 변경할 수 있다.

chrome, firefox, safari, edge 모두 지원하며
오픈소스도 꽤 인기가 많다.

github 은 github dark theme 가 아직 코드 컬러링이 더 좋고
그외 모든 사이트들은 모두 dark reader 가 좋다.

chrome ERR_CONNECTION_RESET

rust 로 간단한 html 응답을 주는 웹 서버를 만들어 테스트하기 위해 chrome 에서 다음과 같이 입력하면 화면에 아무것도 나타나지 않는다.
chrome secret 모드에서도 안된다.
https://localhost:9090

같은 주소에 대해서 firefox 는 표시된다.
curl http://localhost:9090/ 요청도 html 응답을 받고 있다.
rust 서버에서 http request/response 출력해보면 응답도 잘 주고 있다.

chrome 79.0.3945.117 버전을 사용하는데,
chrome 개발툴 -> network 요청결과 status fail 이고,
chrome 개발툴 -> console 에는 다음과 같은 에러가 보인다.
GET http://localhost:9090/ net::ERR_CONNECTION_RESET 200 (OK)
맨 오른쪽 :9090/:1 링크를 클릭하면 그제야 html 화면이 보인다.

chrome 방문객 피싱(phishing) 조심

유튜브 URL 오타로 http://youteube.com 접속하면
여러 사이트가 랜덤하게 열리는데
이 중 apps5321.funnymonday1.live 사이트로 연결되면
갑자기 방문객 설문조사 페이지가 뜬다.
알고 보니 피싱(phishing) 사이트였다. 조심조심~

UA 보고 크롬, 파폭 구분해 그럴싸하게 페이지를 꾸미는것 같다.ㅋ

크롬에서...


파이어폭스에서...


구글에 피싱 페이지를 신고할 수 있다.
https://safebrowsing.google.com/safebrowsing/report_phish/Captcha




chrome android darkmode

chrome 74 android app 부터 dark mode 를 사용할 수 있다.
chrome://flags -> dark 로 검색
이제 다크가 대세~ㅎ






갤럭시폰에서 스샷 만들면 나중에 스샷 볼때 "웹사이트로 이동" 할 수 도 있다~
스샷 이미지를 공유하려고 하면 '이미지' , '웹 링크' 2개중 선택하라고 나온다.
아마 브라우저 스샷시 URL을 별도로 저장해놓는것 같다.


웹페이지 dark mode 보기

개인적으로 어두운 색상이 눈도 편하고 맘에 들어 terminal, IDE 등에 dark 계열 테마를 적용해서 쓴다.
맥,윈도우 OS 자에도 다크모드를 지원해서 native 앱들도 잘 쓸 수 있다.
최근 웹 페이지들도 light(day) <-> dark(night) 를 스위칭할 수 있도록 해준다.
그런데 대부분의 웹페이지는 흰색 배경색이라 chrome extension 에서 stylish 를 사용해서, github, slack, wikipedia 등의 사이트에 맞는 테마를 다운받아 사용했다.
요것보다 모든 페이지를 다크모드로(밝기,선명도등 커스터마이징 가능)해주는 night eye 는 지금 blogger post 편집 화면도 dark 보여준다.
완벽하지 않지만 대부분 사이트를 dark 로 잘 변환해줘서 좋다~
아래 사진 처럼 특히 구글 웹페이지를 잘 바꿔준다.

chrome shortcut

# mac 기준 chrome shortcut

# window,linux 에선 보통 cmd -> ctrl 을 사용하면 된다.
# 웹페이지의 이미지가 변경되었는데, 캐시되어서 새로고침(refresh)해도 그대로인 경우
# 다음 단축키로 캐시를 날리고 hard refresh 할 수 있다.(chrome, firefox 동일)
cmd+shift+r

# 탭 닫기
cmt+w

# 이전탭 이동
ctrl+shift+tab

# 다음탭 이동
ctrl+tab

# 주소줄 바로가기
cmd+l

# 주소줄 자동완성 지우기
주소줄 자동완성 항목에서 shift + delete

# 설정 열기(chrome://settings/)
cmd+,

# 북마크 삭제,추가
cmd+d

# history
cmd+y

# elements 검사
cmd+shfit+c

# console 창 toggle
cmd+option+j

# 확대/축소
cmd+=
cmd+-

# 이전/다음 페이지
cmd+[
cmd+]

구글 숨겨진 게임들

구글에 숨겨진 게임들이 많다.

1. 인터넷을 끊기 상태에서 크롬 페이지에 나타난 공룡화면에서 스페이스바 누르면, 공룡 달리면서 점프하는 게임 시작~
http://www.trex-game.skipser.com/ 에서도 플레이 가능하다.


2. text adventure 라고 검색후 ctrl+shift+i (맥은 cmd+opt+i) -> console -> Would you like to play a game? (yes/no) 라고 묻는다.
여기서 yes 입력 하면 텍스트로 명령을 내리는 게임을 시작할 수 있다.


3. 구글 에서 다음을 검색하면 여러게임이 나온다.
play solitaire
play pacman
play snake
play minesweeper
play tic tac toe




4. 기타 doodle 자료실에서 애니메이션 및 게임등을 플레이 할 수 있다.
https://www.google.com/doodles#archive

http 204 응답 브라우저 처리 방식

# http 응답이 다음과 같이 204 인 경우 브라우저 화면에 변화가 없다.
# 204 : 클라이언의 요청은 성공이지만 서버가 추가적으로 응답줘야할 내용이 없는 경우
status code: 204 No Content

# 찾아보니 204 응답을 받은 클라이언트는 현재 페이지를 벗어나지 않는다고 한다.
# 그래서 서버에서 204 응답으로 바디 내용 비운상태로 주더라도 브라우저는 
# 이전 페이지(204 요청 전)를 보여주고 있어
# 마치 204 요청에 이상한 응답을 주것으로 착각할 수 있다.  

# 실제 curl 로 확인하면 다음과 같이 내용이 없이 응답을 주는것을 확인 할 수 있다.

* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> GET /ysoftman/test HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.57.0
> Accept: */*
>
< HTTP/1.1 204 No Content
< Content-Type: application/json; charset=UTF-8
< X-Content-Type-Options: nosniff
< X-Request-Id: d6e8e682-86f5-45d6-91d5-67a1c26efd38
< Date: Wed, 01 Aug 2018 06:13:50 GMT
<
* Connection #0 to host localhost left intact

# 204 상태 코드 설명 참고

chrome 돋움 폰트 간격 문제

윈도우 크롬(현재 v67)에서 돋움 폰트 설정된경우 m 자의 간격이 유독 크게 보인다.
네이버의 로그인 입력 상자의 css 에 다음과 같이 Dotum(돋움) 폰트를 우선적으로 사용하고 있고 아래 그림과 같이 m, p 문자등의 간격(자간)이 큰 문제가 있다.

font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;

font-family: '돋움',Dotum,Arial,Helvetica,sans-serif;

크롬 v37 부터 폰트를 윈도우 GDI 방식이 아닌 directwrite 방식으로 사용했는데 돋움과 같은 비트맵 폰트의 일부 글자의 자간이 왜곡되는것이 문제라고 한다.
참고 : http://www.zdnet.co.kr/news/news_view.asp?artice_id=20140915152518
몇년이 지났지만 크롬팀은 큰 이슈로 생각하지 않아서인지 아직도 수정되지 않았다.

chrome 버벅거림

chrome(크롬)을 사용하다가 버벅거림 현상(스크롤 안되고, 마우스 이동 안되고, 계속 대기되는 상태등...)이 있을때 다음 기능을 해제하면 버벅거림은 사라진다.

chrome://settings/ -> 고급 -> 시스템 -> 가능한 경우 하드웨어 가속 사용 -> 해제

하드웨어 가속은 이미지나 비디오등의 사이트를 렌더링할때 GPU를 사용해 CPU의 부담을 덜고 빠르게 처리하기 위해 사용하지만 저사양의 PC나 그래픽드라이버드의 문제로 GPU 를 제대로 사용하지 못해 오히려 더 느려지는 경우가 있다고 한다.

chromium 커밋하기

# 우선 크롬 소스 다운로드 받고 빌드에 이상이 없는 환경이어야 한다.
# chromium mac build 포스트 참고
https://yoonbh2714.blogspot.kr/2018/03/chromium-mac-build_79.html
# depot_tools 를 사용할 수 있도록 path 등록
export PATH="$PATH:${HOME}/workspace/depot_tools"

# 커밋 설명
https://www.chromium.org/developers/contributing-code

# 로컬 브랜치 생성
git checkout -b ysoftman -t origin/master

# git config 설정
# 특이하게 gerrit 이라는 리뷰툴을 사용한다.
git config --global user.name "ysoftman"
git config --global user.email "ysoftman@gmail.com"
git config --global core.autocrlf false
git config --global core.filemode false
git config --global branch.autosetuprebase always
git config --local gerrit.host true

# chromium 에 처음으로 커밋한다면 AUTHORS 파일에 명시해야 한다.
# 커밋 설명 'legal stuff' 부분 참고
# 우선 개인 또는 기업으로 라이센스 동의서를 작성해야 한다.
# 개인(Individual Contributor License Agreement)
https://cla.developers.google.com/about/google-individual?csw=1
# 기업
https://cla.developers.google.com/about/google-corporate?csw=1
# 해당 포맷(Name <email address>)을 알파벳순서에 맞게 추가한다.
cd ~/workspace/chromium/src && vi AUTHORS

# upload (push) 하기
git cl upload

# 커밋 메시지는 다음과 같은 형식으로 작성한다.
Summary of change
Longer description of change addressing as appropriate: why the change is made,
context if it is part of many changes, description of previous behavior and
newly introduced differences, etc.
Long lines should be wrapped to 80 columns for easier log message viewing in
terminals.
Bug: 123456

# gerrit 에서 커밋에 대한 reviewer 지정하고 리뷰 시작 버튼을 클릭한다.
# 참고로 dry run(모의 테스트)는 committer만 실행할 수 있고 그냥 두면 된다.
# 예시 https://chromium-review.googlesource.com/c/chromium/src/+/1025544

# reviewers 로부터 accept 가 되지 않는 경우
# 소스 수정이 필요한경우 우선 master 의 최신 내용을 pull 해 온다.
# 위에서 브랜치 생성시(checkout) master 브랜치를 트래킹(-t)하고 있기 때문에 master 브랜치가 pull 된다.
git pull

# 이제 소스 수정...
# 커밋
git ci -a

# 푸시
git cl upload

# merged 가 되면 chrome release 에서 명시된 버전별 change log 에서
# 커밋을 검색해 현재 어떤 채널과 버전을 파악할 수 있다.
# 위 예시 커밋은 68.0.3432.3 버전에 포함되어 있고 현재 dev 채널이다.
https://chromium.googlesource.com/chromium/src/+log/68.0.3423.2..68.0.3432.3?pretty=fuller&n=10000

# 크롬 버전 릴리즈 현황 파악
https://chromereleases.googleblog.com/

# major 버전업은 6주마다 적용되니 우선 dev 버전을 받아 미리 확인해볼 수 있다.
https://www.chromium.org/getting-involved/dev-channel

chrome 주소 표시줄에서 검색하기

chrome 주소 표시줄(omnibox)에서 다양한 검색엔진을 사용할 수 있다.
chrome://settings -> '검색엔진 관리' 에서 기본, 기타 검색 엔진에 설정된 키워드(수정 가능)을 사용한다.


참고로 기타 검색 엔진에서 기본으로 추가할 수 있지만
처음 기본 검색 엔진은 크롬 설치될때 기본으로 추가되는 엔진들로 삭제하면 사라진다.
다시 기본검색엔진(위 사진에서는 Google, 네이버, Daum)을 추가하려면 설정초기화해야 한다.

다음과 같이 주소 표시줄에서 설정된 검색엔진 키워드로 타이핑 후 space 또는 tab 을 누르고 검색하면 된다.