C#에서 Chrome 브라우저 사용 + 웹 소스에서 자바스크립트로 C# 함수 호출하기 (CefSharp / Chromium)

2017/03/09 - [C#] - C# WebBrowser + Chrome 크롬 브라우저 사용하기 (cefSharp / Chromium)

 

2017년 3월에 CEFSharp이라는 크롬미움 브라우저를 감싼(Embedded) 소스를 사용해서,

웹브라우저를 사용해 본 경험이 있었습니다. 

 

CEF Sharp

해당 과정을 아주 간단하게 정리하면서,

 

** 추가로 Web(src)에서 C#의 함수를 호출하는 소스를 만들어 보려고 합니다.

Javascript로 C# 어플리케이션을 호출하게 되면,

기존에 Web에서 불가능한 H/W를 컨트롤 하는 기능들을 작업해 보려고 합니다.

 

 

Visual Studio 2019 다운로드 및 설정

 

먼저 Visual Studio 2019 커뮤니터 버전을 설치해 보았습니다.

visualstudio.microsoft.com/ko/downloads/

설치는 Workloads에서 ".NET desktop development"를 체크해 줍니다.

 

Language packs에서 "Korean"를 추가 선택합니다.

다운로드 및 설치가 완료되면,

Visaul Studio 2019(VS2019 이하)에서 한글팩 적용하려면,

VS2019를 실행후, "Continue without code"로 우선 실행

Tools의 Options를 선택하면, 환경 설정 창이 뜹니다.

언어 변경은 "International Settings"의 Languages를 "한국어"로 변경하면 됩니다.

언어 변경

언어변경 적용은 VS2019를 재시작해야 적용됩니다.

 

이제 개발 환경 준비가 완료 되었습니다.

 

 

 

CefSharp로 Chromium Web Browser 만들기

(1) 새 프로젝트 만들기

신규 프로젝트로 만들어 봅니다.

새 프로젝트 만들기

언어와 환경을 선택할 수 있는 부분이 있습니다.

언어는 "C#"를 선택하고, 환경은 "Windows"를 선택하면, 

해당 선택에 가능한 프로젝트 템플릿들이 선택 가능할 수 있게 됩니다.

여기서, "Windows Forms 앱(.NET Framework)"를 선택해 줍니다.

해당 부분을 선택하면, 윈도우 응용프로그램이 WinForm를 만들 수 있게 됩니다.

Windows Forms 앱 프로젝트 템플릿 선택

프로젝트 이름은 자신이 원하는 이름을 선택하면 됩니다.

(저는 chromeProject로 만들어 보았습니다.)

위치는 기본 위치에서 하셔도 되고, 저는 위치를 바꾸어 주었습니다.

솔루션 이름은 여러개의 프로젝트를 감싸는 이름입니다.

단순한 프로젝트의 경우 솔루션 이름과 같이 하셔도 무방합니다.

(예를 들면, 솔루션 이름을 Office라면, 프로젝트 이름은 PowerPoint로 만들겠죠)

프로젝트 이름과 소스 저장 위치 설정

체크를 빼면, 프로젝트별 폴더 생성됨

"[  ] 솔루션 및 프로젝트를 같은 디렉터리에 배치(D)"를 체크를 하지 않으면,

프로젝트별로 디렉터리가 생성돼서 관리되며,

프로젝트가 2개 이상인 경우는 해당 부분을 체크하지 않는 것이 좋습니다.

프레임워크는 .NET Framework 4.7.2를 선택하는 것입니다.

( CefSharp은 .NET Framework의 4.5.2 이상만 지원 )

 

 

(2) NuGet에서 CefSharp 패키지 가져오기

CefSharp 패키지를 CefSharp GitHub를 통해서도 가져올 수 있습니다만,

VisualStudio의 NuGet를 통하면 편리하긴 합니다.

마우스를 프로젝트의 "참조"에서 오른쪽 클릭으로, "NuGet 패키지 관리"가 실행합니다.

CefSharp 검색어로 검색해 보면,

CefSharp.WinForms를 찾아볼 수 있습니다.

설치를 하기 전에, 빌드시 지원 플랫폼의 CPU Bit 구성을 변경해줍니다.

상단의 "구성 관리자..."를 선택합니다.

(플랫폼에서 새로 만들기가 안되면, 활성 솔루션 플랫폼을 선택에서 새로 만들기로 선택하세요)

여기서 "새로 만들기..."를 선택해서 x64 플랫폼을 추가해 줍니다.

(CefSharp 패키지는 x64로 변경해야만 프로젝트에서 사용이 가능합니다.)

x64 플랫폼 추가완료

플랫폼 선택이 완료되면, 

CefSharp.WinForms를 설치를 시작합니다.

패키지의 변경 내용이 알림창으로 뜹니다.

패키지의 Readme.txt 파일

설치가 완료되면, 패키지의 Readme.txt 파일을 열어줍니다.

packages.config 파일이 생성됩니다.

패키지에서 다운로드한 항목들이 packages.config 파일로 프로젝트 안에 생성됩니다.

 

 

(3) Web 브라우저 만들기

 

이제 본격적으로 소스에서 CefSharp패키지를 이용해서 Web브라우저를 만들어 보려고 합니다.

 

Form1.cs에서 소스 보기(F7)로 소스 편집 창을 오픈합니다.

이곳에 다음의 소스를 추가해 봅니다.

using System.Windows.Forms;
// cefSharp를 위한 Lib
using CefSharp;
using CefSharp.WinForms;

namespace chromeProject
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeChromeBrowser();//ChromiumWebBrowser를 위한 Inititalize 함수
        }

        private void InitializeChromeBrowser()
        {
            CefSettings cefSettings = new CefSettings();
            Cef.Initialize(cefSettings);
            ChromiumWebBrowser chrome = new ChromiumWebBrowser("http://blog.edit.kr");
            chrome.Dock = DockStyle.Fill;// From창에 ChrominumWebCrowser 가득 채우기
            this.Controls.Add(chrome);
        }
    }
}

해당 소스는 "http://blog.edit.kr"를 불러오는 소스입니다.

 

"시작"으로 실행을 해보시면, 다음과 같이 초간단 Web브라우저가 생성됩니다.

 

이제 Web 사이트에서 해당 C# 애플리케이션의 함수를 호출하는 작업을 해보려고 합니다.

 

 

 

(4) Web에서 C# 어플리케이션 함수 호출하기

우선적으로 C#에 호출할 함수를 추가해 줍니다.

처음에 CefSharpSettings의 속성 값으로 해보려 했습니다.

// 설정값이 적용이 실행 안됩니다. 
// (아래 방법 사용하지 마세요)
CefSharpSettings.WcfEnabled = true
CefSharpSettings.LegacyJavascriptBindingEnabled = true;

해당 속성 값들을 입력해서 처리하는 방법은 제대로 되지 않았습니다.

 

아래는 C#의 최종적인 소스입니다.

using System.Windows.Forms;
// cefSharp를 위한 Lib
using CefSharp;
using CefSharp.WinForms;

namespace chromeProject
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeChromeBrowser();//ChromiumWebBrowser를 위한 Inititalize 함수
        }

        private void InitializeChromeBrowser()
        {
            CefSettings cefSettings = new CefSettings();
            Cef.Initialize(cefSettings);
            ChromiumWebBrowser chrome = new ChromiumWebBrowser("https://tistory4.daumcdn.net/tistory/1848535/skin/images/test.html");
            chrome.Dock = DockStyle.Fill;// From창에 ChrominumWebCrowser 가득 채우기
            this.Controls.Add(chrome);
            // Javascript Event 호출 활성화 - "cAPI.showMsg()"로 호출함.
            chrome.JavascriptObjectRepository.Settings.LegacyBindingEnabled = true;
            chrome.JavascriptObjectRepository.Register("cAPI", new ChromeAPI(), false, BindingOptions.DefaultBinder);
        }
    }

    internal class ChromeAPI
    {
        public void showMsg(string msg)
        {
            MessageBox.Show(msg);
        }
    }
}

여기서 중요한 부분은

chrome인스턴스에 Javascript 바인드를 활성화하는 부분과

Javascript에서 사용할 Object의 함수명 호출이 중요합니다.

 

[ test.html 소스 ]

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>CefSharp TEST</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>

<div class="container">
 <h2>chromeAPI.ShowMessage(string);</h2>
    <label for="txtMsg">Message:
    <input type="text" id="txtMsg" class="form-control"/></label>
    <button class="btn btn-primary" id="sendMsg">팝업메시지</button>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script>
    $(function ($) {
        $('#sendMsg').on("click",function () {
            var strMsg = $('#txtMsg').val();
            cAPI.showMsg(strMsg);
        })
    })
</script>
</body>
</html>

 

test.html에서 자바스크립트에서 cAPI.showMsg() 호출하면,

ChromeAPI의 showMsg() 함수가 호출이 됩니다.

test.html 페이지의 <input>에 입력한 값이

애플리케이션에서 MessageBox로 전달되는 모습니다.

 

 

 

[ 참고 사이트 ]

How to use CefSharp (chromium embedded framework c#) in a Winforms application

Remove CefSharp.WebBrowserExtensions.RegisterJsObject/RegisterAsyncJsObject

(YouTube) C# Chrome Chromium web Browser 크롬 브라우저 적용하기 CefSharp