Safari Extensions에 입문해 보세요!
Summary
iOS와 아이패드 OS 모두 사용할 수 있는Safari Extensions 문으로 들어가세요.
컨디션
1.준비편
1.1 엑스코드 프로젝트를 만들어 보자
No
작업
캡처
1
Xcode 시작, 누르기
Create New Xcode Project
2
Choose a template for your new project 화면에서 선택Multiplatforms, 선택Application→Safari Extension App.
3
입력
Product Name 또는 Bundle Identifier 양호
4
프로젝트 파일 저장 위치
5
프로젝트 완료
1.2 시뮬레이터로 Safari Extension 허용
어쨌든 여기서 만든 Xcode 프로젝트를 먼저 수행하고 응용 프로그램의 Extension을 허가하세요.
No
작업
캡처
1
Xcode 재생성 버튼을 눌러 에뮬레이터를 위한 응용 프로그램 구성
2
시뮬레이터가 시작되었는지 확인
3
주 화면 표시
4
iOS에 대한 기본 설정 열기
5
화면 스크롤, Safari 항목 클릭
6
화면 안에서 스크롤하고 기능 확장을 클릭
7
방금 만든 앱이 뜨니까 그 앱을 클릭해
8
맨 위에 있는 Switch를 On으로 설정하고 뒤로 버튼을 누릅니다.
9
On으로 확장을 확인합니다.
이렇게 하면 확장을 사용할 수 있습니다.
2. 사이트 방문 시도
그러면 확장된 시뮬레이터 Safari를 사용하여 다음 사이트를 방문하십시오
다음과 같이 표시될 수 있습니다.
3. Div 요소를 차단해 본다.
위에서 방문한 사이트는 아래의 원본 코드이다.
<!DOCTYPE html>
<html>
<body>
<h1>Safari Extensions Practice</h1>
<p>My first paragraph.</p>
<p id="WillHidden">This is presenting! :p </p>
</body>
</html>
WillHidden로 지정된 요소를 숨기려고 합니다.3.1 Safari Extension에서 위 웹 사이트를 대상으로
ManifestJson 파일의 conntscripts를 다음 내용으로 고쳐 쓰시오
↓ 수정 전
"content_scripts": [{
"js": [ "content.js" ],
"matches": [ "*://example.com/*" ]
}],
"content_scripts": [{
"js": [ "content.js" ],
"matches": [ "*://h1d3mun3.github.io/*" ]
}],
3.2 Div의 Vissible을 숨깁니다.
content.js 파일을 다음 내용으로 고쳐 쓰시오
수정 전
browser.runtime.sendMessage({ greeting: "hello" }).then((response) => {
console.log("Received response: ", response);
});
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log("Received request: ", request);
});
const element = document.getElementById('WillHidden');
element.remove();
3.3 Safari가 페이지에 액세스할 수 있도록 어플리케이션 설정
다음 순서에 따라 조작하다.
No
작업
캡처
1
아날로그에 앱을 설치한 상태에서 아까 웹사이트를 방문해 화면 아래 히라가나 버튼을 누르고 화면 위쪽에 있는 앱 이름을 누르면
2
액세스가 허용됩니까?대화상자
3
낙하산이 사라진 것을 확인하다
※ 스크린샷을 준비하는 것은 번거롭기 때문에 이미 허가받은 상태에서만 스크린샷을 사용하지만, 절차는 동일합니다.
4. 끝
Native 지식은 거의 필요 없고, JavaScript 지식이 있으면 Safari 웹 페이지 내부에 표시되는 내용을 제어할 수 있습니다.
또한 이 확장 기능은 모질라의 브라우저 엑스텐션스와 거의 같기 때문에 이미 확장 기능이 만들어졌다면 사파리도 같은 기능을 제공할 가능성이 높다.
또 같은 애플 플랫폼이라면 맥OS, iOS, 아이패드OS 등 모든 플랫폼에서 공유할 수 있다는 점도 장점이다.
사이트 축소판 그림
Reference
이 문제에 관하여(Safari Extensions에 입문해 보세요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/h1d3mun3/articles/0bbcdcef81223c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
